Menu
I have 4 different html web pages. The html code below is for a menubar which I want to apply to all four pages. Is there any way I can do this using CSS instead of copying/pasting this menubar html code on all 4 of my html web pages? Basically the four pages are Home, News, Contact, About. Whenever someone clicks on a menubar item, it will redirect them to one of the 4 pages. And on all 4 of those pages, I want the menubar to be displayed. I want to create a CSS file which I can just link all 4 pages to and then the menubar will be displayed (code below). Thanks in advance!
Is there any way I can create a CSS file which at least takes care of the styling? And I will manually add the menubar buttons to each html page?
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="page1.html">Home</a></li>
<li><a href="page2.html">News</a></li>
<li><a href="page3.html">Contact</a></li>
<li><a href="page4.html">About</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
</div>
</body>
</html>
464
You shouldn't/can't do this with CSS. You need either:
- For a non-programmatic solution: (Deprecated)<link rel="import" href="sidebar.html"> save your sidebar in a sidebar.html file and call it with this snippet. Check out the support tables for this function.
<?php include 'sidebar.php'; ?>
There are more solutions, but these are the most obvious AFAIK.
192
You cannot achieve this with HTML and CSS only. If you have PHP server then, I suggest to create a PHP file and put your nav-bar code and then use the following PHP code in the all pages.
<?php include 'nav.php'; ?>
Here is the code for nav.php:
<?php
echo
'<ul>
<li><a class="active" href="page1.html">Home</a></li>
<li><a href="page2.html">News</a></li>
<li><a href="page3.html">Contact</a></li>
<li><a href="page4.html">About</a></li>
</ul>';
?>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
