html - How to apply this sidebar to all pages using CSS? -
i have 4 different html web pages. html code below menubar want apply 4 pages. there way can using css instead of copying/pasting menubar html code on 4 of html web pages? 4 pages home, news, contact, about. whenever clicks on menubar item, redirect them 1 of 4 pages. , on 4 of pages, want menubar displayed. want create css file can link 4 pages , menubar displayed (code below). in advance!
is there way can create css file @ least takes care of styling? , manually add menubar buttons 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 { 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>
you shouldn't/can't css. need either:
for non-programmatic solution:
<link rel="import" href="sidebar.html">
save sidebar insidebar.html
file , call snippet. check out support tables function.include php so:
<?php include 'sidebar.php'; ?>
there more solutions, these obvious afaik.
Comments
Post a Comment