Using css for styling a dynamic menu
Question
I have this code for a dynamic menu using php:
menu.php:
<?php
// Get current page file name
$page = basename($_SERVER["PHP_SELF"]);
?>
<?php include "templates/header.php"; ?>
<?php include "templates/footer.php"; ?>
templates/header.php:
<h1>A Library</h1>
<div id="navigation">
<ul>
<li><a href="index.php" <?php if ($page == "index.php") echo 'class="current"' ?>>Products</a></li>
<li><a href="resume.php" <?php if ($page == "resume.php") echo 'class="current"' ?>>Resume</a></li>
<li><a href="photography.php" <?php if ($page == "photography.php") echo 'class="current"' ?>>Photography</a></li>
<li><a href="about.php" <?php if ($page == "about.php") echo 'class="current"' ?>>About</a></li>
<li><a href="contact.php" <?php if ($page == "contact.php") echo 'class="current"' ?>>Contact</a></li>
</ul>
</div>
</body>
</html>
templates/footer.php:
</body>
</html>
menu.php and file templates are in the same directory
This code creates a simple and small sized menu.How could i make this a bit better usng css?
I wrote this css code but i have no idea how to connect it with the menu:
#navigation ul li a.current {
background-color: #FFF;
border-bottom: 1px solid #FFF;
}
2 answers
solution1
1 2019-05-24 16:18:07
there are multiple ways to include CSS, in your case the simplest way would be to create a lets say style.css and include it in your main template inside the tags: <link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'> this way it will affect all of your dynamically included CSS and it should be class locked for interchangeable components. Example:
<html>
<head>
... other meta tags
<link href=/path/to/yourcss/style.css rel=stylesheet type='text/css'>
</head>
<body>
your php includes for content
</body>
</html>
solution2
0 2019-05-24 16:16:12
you should use <link> Tag to include css file with html / php
<head>
<link rel='stylesheet' type='text/css' href='CSS/main.css'>
</head>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.