Geek Answers Handbook

How to apply this sidebar to all pages using CSS?

I have 4 different html web pages. Below is the html code for the menu bar that I want to apply to all four pages. Is there a way to do this with CSS instead of copying / pasting this HTML text code on all 4 of my html pages? Basically, four pages are Home, News, Contacts, A. Whenever someone clicks on a menu item, he redirects them to one of 4 pages. And on all 4 of these pages, I want the menu to display. I want to create a CSS file that I can only associate with 4 pages, and then a menu will appear (code below). Thanks in advance!

Is there a way to create a CSS file that at least takes care of styling? And will I manually add menu 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>
+6
source share
4 answers

You should not / cannot do this with CSS. You need:

  • For a non-software solution: <link rel="import" href="sidebar.html"> save the sidebar in the sidebar.html file and invoke it using this snippet. Check out the support tables for this feature.

  • Include it with PHP as follows: <?php include 'sidebar.php'; ?> <?php include 'sidebar.php'; ?>

There are more solutions, but they are the most obvious AFAIK.

+5
source

You cannot achieve this only with HTML and CSS. If you have a PHP server, I suggest creating a PHP file and placing your code based on the navigation bar, and then use the following PHP code on 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>'; ?>
+1
source

Not with CSS, you have the following options:

  • To download it, use the web component and javascript (1) .

  • The Jade template engine , which is the language for writing HTML templates, creates HTML and supports dynamic reusable (DRY) code, this allows you to include (2) partial HTML files in .jade with this command

     include ./path/to/sidebar.jade

    Example from Jade:

     //- index.jade doctype html html include ./includes/head.jade body h1 My Site p Welcome to my super lame site. include ./includes/foot.jade

  • A server-side solution such as PHP or ASP.NET.

----------------------------------------------- --- ------------------------

(1) http://webcomponents.org/

(2) http://jade-lang.com/reference/includes/

+1
source

There is no way to do this css, html is responsible for the elements and css only for their style, you can not create css elements. I suggest you copy and paste the code. Or look for other tools, fill them with js, php or something like that.

+1
source

More articles:


All Articles