Insert menu tab on all pages - HTML & CSS

Question

I want to know if there is any way I could insert an HTML codes into all the other pages of the website without loosing the CSS design of the file. I've tried using but it's too messy. I want to know if there is an easier way to insert the HTML file into all other files.

The file I'm trying to load in the pages is an HTML for a menu tab.

Code:

<nav id="tab">
<ul>
     <li><a href="index.html" id="tabb">HOME</a></li>        
     <li><a href="codes/index.html" id="tabb">CODES</a>
         <ul id="codeul">    
             <li><a href="codes/mirc_downloads/index.html" id="tabb">mIRC</a></li>
             <li><a href="codes/batch_downloads/index.html" id="tabb">BATCH</a></li>
             <li><a href="codes/samp_downloads/index.html" id="tabb">SA-MP</a></li>
         </ul>       
     </li>
     <li><a href="gallery" id="tabb">GALLERY</a></li>    
     <li><a href="#" id="tabb">CONTACT</a>
         <ul id="contul">
             <li><a href="http://facebook.com/areeb12/" id="tabb">Facebook</a></li>
             <li><a href="http://twitter.com/AreebBeigh/" id="tabb">Twitter</a></li>
             <li><a href="https://plus.google.com/u/0/107540768248951141539" id="tabb">Google</a></li>
             <li><a href="http://instagram.com/areebbeigh" id="tabb">Instagram</a></li>
     </li>
         </ul>    
</ul>
<div id="clear"></div>
</nav>

CSS

/* Nav tab */

#tab {
     background-color: #000;
     padding: 1px 50px;
     opacity: 0.7;
     position: relative;
     top: 65px;
     margin-top: -64px;
     //float: right;
     //border-bottom: 1px solid grey;
}

#tab ul li a {
     padding: 15px 14px;
     text-decoration: none;
     font-weight: bold;
     font-size: 24px;
     background-color: black;
     border-right: 1px solid white;
     border-left: 1px solid white;
     color: white;
}

#tab ul li a:hover {
     padding: 15px 14px;
     text-decoration: none;
     font-weight: bold;
     font-size: 24px;
     background-color: #33333;
     //opacity: 1;
     color: white;
}

#tab ul li ul a {
     padding: 10px;  
     display: block;
     background-color: #333333;
}

#tab ul li ul a:hover {
     padding: 10px;  
     display: block;
     background-color: #666666;
}

#tab ul li ul {
     background-color: #333333;
}


/* Contact drop down edits */

#contul {
     width: 126px;
}

/* Codes drop down edits */

#codeul {
     width: 97px;
}


#tab ul li {
     display: inline;
     position: relative;
}


/* Drop down menu */

#tab ul ul  {
     display: none;
     position: absolute;
     left: 0px;
     background-color: white;
}

/* Trigger for drop down menu */

#tab ul li:hover ul{
     display: block;
     transition: 0.3s;
}

#clear {
     clear:both;  
}

If any further info is needed, here's the website: www.areeb-beigh.tk

The tab is only on the index.html page as I don't want to copy and paste that long HTML into every single page.. and moreover editing the same would be like a hell lotta work.

I'm just a beginner so please keep it simple :)! Any help would be appreciated.

Thanks in advance :)!

Regards -Areeb

score 1 · Answer 1 · answered Oct 23 '15 at 10:09

1

As long as you link the css file in any new html documents ie. <link rel="stylesheet" type="text/css" href="style.css"/> you should be able to copy that html code from document to document.

answered Oct 23 '15 at 10:09

Angus Dobson

41
1
9

That's what I want to avoid.. because if I have to edit any content in the tab then I have to edit it in every single file. – Areeb Oct 23 '15 at 10:32

score 1 · Accepted Answer · answered Oct 23 '15 at 10:18

If you are simply looking for a way to include your CSS styling in the page once without having to use the same long CSS property setup for each single page, you should make them in styles.css file for example, and then just include it in your HTML <head> tags with following:

<link rel="stylesheet" type="text/css" href="styles.css">

For including HTML files in other HTML document, only way to do this in pure HTML is using <iframe>, which however is not that well received option, especially if you're creating a responsive website.

Alternative and the easiest way is to implement some PHP here, but you must of course make sure your web server supports PHP.

PHP include:

<?php
   include 'navigation.html';
?>

This can be used to create the whole template of your website by just including the navigation in each of your pages, or you can even create a header.php file which includes everything you have in your header part of the page, and then include that to each of your content pages.

Thx for your reply, yes I have linked everything to a single style sheet. I've just added a CSS snippet up there in my post. Also isn't there any other way in 'HTML' I could include the tabs on every page? :| — Areeb, Oct 23 '15 at 10:34
I'm afraid not. For HTML the only way seems to be embedding the file and that can be done with iframes. You could also try some JavaScript, or jQuery to be more specific: http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file — Pepelius, Oct 23 '15 at 10:43

Insert menu tab on all pages - HTML & CSS

2 Answers2