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 in sidebar.html file , call snippet. check out support tables function.

  • include php so: <?php include 'sidebar.php'; ?>

there more solutions, these obvious afaik.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -