menu bar using css - Web Design Forum Graphic Design Site Templates Flash CSS Discussions

ajit22 · #1 04-07-2009, 10:28 AM

Here is css souce code to create menu bar..

Code:

<style type="text/css">
    
    #coolmenu{
    border: 1px solid black;
    width: 170px;
    background-color: #E6E6E6;
    }
    
    #coolmenu a{
    font: bold 13px Verdana;
    padding: 2px;
    padding-left: 4px;
    display: block;
    width: 100%;
    color: black;
    text-decoration: none;
    border-bottom: 1px solid black;
    }
    
    html>body #coolmenu a{ /*Non IE rule*/
    width: auto;
    }
    
    #coolmenu a:hover{
    background-color: black;
    color: white;
    }
    
    </style>
    
    <div id="coolmenu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    </div>

gkumar · #2 06-22-2009, 10:20 AM

First I have created two css files and saved them as demo-menu-item.css and demo-menu-bar.css. They are based on the original menu-item.css and menu-bar.css which you will find inside the css_dhtmlsuite folder.

I have included these files by using the <link> attribute in the head section of this HTML file:

<link rel="stylesheet" href="css/demo-menu-item.css" media="screen" type="text/css">
<link rel="stylesheet" href="css/demo-menu-bar.css" media="screen" type="text/css">

If you open the css files menu-item.css and menu-bar.css, you will see that all classes starts with the "prefix" DHTMLSuite_. In the new css files, I want to use a custom prefix instead of "DHTMLSuite_". So I did a global search and replace in the new css files and replaced "DHTMLSuite_" with "Custom_".

Then I called two methods for the menuBar object in order to notify the script of the new css prefix:

menuBar.setMenuItemCssPrefix('Custom_');
menuBar.setCssPrefix('Custom_');

This is the entire js code for the menu bar you see above:

var menuModel = new DHTMLSuite.menuModel();
menuModel.addItemsFromMarkup('menuModel');
menuModel.setMainMenuGroupWidth(00);
menuModel.init();

var menuBar = new DHTMLSuite.menuBar();
menuBar.addMenuItems(menuModel);
menuBar.setMenuItemCssPrefix('Custom_');
menuBar.setCssPrefix('Custom_');
menuBar.setTarget('menuDiv');

menuBar.init();

File
View
Tools
An other way to define alternative css

There's also another way of doing this. The method described above is very useful if you want to have more than one menu on a page and with different styling(as we have here). If all your menus got the same styling, then you can follow a simpler procedure.

The first thing you do is to make a copy of menu-item.css and menu-bar.css and save them in the same folder as the originals(example: menu-item-2.css and menu-bar-2.css). Then make your changes to these two css files.(NB! You don't have to change the prefix of the css class when you're using this method).

The last thing you have to do is to make the menuBar object aware of these two css files:

menuBar.setCssLayout('menu-bar-2.css');
menuBar.setMenuItemLayoutCss('menu-item-2.css');

The script will load these two css files dynamically, so you don't have to include them by using <LINK> tags.

chris34 · #3 04-22-2010, 05:15 AM

Thanks For sharing this Source Code With us,I Found it very useful for myself
Keep sharing such useful code with us........