How to include button text and links as part of css


Tags: css,navigationbar

Problem :

I'm redesigning my company's website and am trying to create a horizontal navigation bar with button links (which I've managed somewhat). The problem is that the exact same menu is supposed to appear on every page (of which there are 100+) and the button options may increase of decrease in the future.

My question is this: Is there a way to place the button text and associated links in the external css to make re-coding and future edits to all those pages simpler? I've searched and tried everything I could think of. The below code is still very much a work in progress, so any advice would be appreciated.

Relevant css:

/* BEGIN Menu Buttons*/

#menu {text-align:center;}

#menu ul {
    display: inline-block;
    list-style-type: none;
    text-align: center;}

#menu ul li {
    float: left;
    width: 140px;
    height:50px;
    list-style-type:none;}

#menu li a {
    width: 130px;
    height:40px;
    padding:5px;
    display:block;
    color: #fff ;
    background-color: #000 ;
    font: Times New Roman;
    font-size:14pt;
    line-height:40px;
    text-align:center;
    text-decoration: none ;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff;;}

#menu li a:hover {
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    outline: 1px solid #fff;
    font-size:16pt;}

/* END Menu Buttons*/

Relevant HTML:

<header>
<div id="menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="buy.html">Buy</a></li>
        <li><a href="sell.html">Sell</a></li>
        <li><a href="maintenance.html">Maintenance</a></li>
        <li><a href="parts.html">Parts</a></li>
        <li><a href="information.html">Information</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
  </div>
</header>


Solution :

If I understand your question correctly, the solution I would use is PHP

First of all you would need to save your page to .php for this to work (instead of .html)

Secondly, create a new file (menu.php) and paste in the MENU code above.

In every page that you have, you replace the menu HTML code with this:

<?php

include 'menu.php';

?>

(assuming you put the menu.php in the same folder as the rest of your pages)

Now, if the content of your menu expands, just edit menu.php and your menu is updated on all pages that have your menu.php file included.


    CSS Howto..

    How to apply CSS to 2x2 classes?

    How to remove background color from reply of html email template in Outlook 2010/2013

    How to style 2 vertical jQuery UI Slider handles?

    How do I add a CSS class to a BoundField, so I can find it with jQuery?

    How do I set the table cell widths to minimum except last column?

    How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

    Javascript - how to show and hide an element per second?

    Css How to add round corners when hover li element?

    How to Make the Content 100% height and equal height columns in this layout?

    How to change the opacity of image on hover using css

    How to resize in
    with float:left?

    How to Make Hover Background Fade Smoothly In and Out?

    how to display background color in outlook 2010 html email?

    how to change a css class style through javascript?

    How to apply multiple CSS3 rotation transformations (compounded) without javascript?

    How to change the colors of HTML form elements displayed in UIWebView?

    How should I toggle action links based on row hover

    How to make links work, regardless of location in directory structure?

    How to add head section in a page that has layout template

    html/css, how to push an element on to the next line?

    How to use a defined property value as another property in pure CSS?

    ng-bind-html adds owns css class 'ng-binding' which brokes all nested css, how get rid of it?

    How to target iPhone 3GS AND iPhone 4 in one media query?

    How to keep background image on css gradient

    JQuery : How to disable mouse move vertically?

    How can I get some padding between these form boxes?

    How can I build a flexible ratings widget in LESS instead of straight CSS?

    jQuery: How can I set css with own width?

    How to give reference to static resources like css,images,java script in JSP?

    How to stretch text in CSS like microsoft word?