CODEWITHSUNDEEP
htmlcss
Areeb
Areeb

Reputation: 406

Insert menu tab on all pages - HTML & CSS

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

Upvotes: 0

Views: 1184

Answers (2)

Pepelius
Pepelius

Reputation: 1609

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.

Upvotes: 1

Angus Dobson
Angus Dobson

Reputation: 41

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.

Upvotes: 1

Related Questions