PDA

View Full Version : Horizontal CSS Menus with submenu



greenweb
06-16-2006, 09:52 AM
Horizontal CSS Menus with submenu



This is my personal version of Horizontal menų with sottomenų that comes visualized when the tab it comes cliccato. Tested on win: Work 8,54, Firefox 1,5, IE 6,0, IE 5.5

Demo free to use:
http://greenweb.altervista.org/webdir/cssmenu/1/tabs_sm.html

myyoungfamily
06-16-2006, 02:34 PM
Hey,
Can you post your CSS or attach the stylesheet so we can see how you did this?
-Jonathan

Twey
06-16-2006, 03:18 PM
http://greenweb.altervista.org/webdir/cssmenu/1/tabs_sottomenu.css

myyoungfamily
06-16-2006, 03:23 PM
When I click that link it takes me here: http://home.altervista.org/site/ ?
-Jonathan

Twey
06-16-2006, 03:24 PM
Maybe some kind of hotlink protection?

body{font: 100.01% "Trebuchet MS",Arial,sans-serif}

/******************************* Tabs */
div#header {background: #E6F2F2; margin: 0; padding: 0;}
div#sfondo {background: #CEE7E7; height: 1.5em; margin: 0.5em}
div#menu{background: #E6F2F2;padding: 0; margin: 0; position: relative; border-bottom: 1px solid #787878;}
div#menu ul{list-style-type: none;margin: 0;padding:0;}
div#menu li{display: inline;margin: 0;padding:0}
div#menu li a{text-decoration: none;border: 1px solid #787878; padding: 0px 0.3em;
background: #ccc;color: #036;}
div#menu li a:hover{background-color: #f0f0f0}
div#menu li#attiva a{border-bottom: 1px solid #CEE7E7;background-color: #CEE7E7;color: #603;}

/************************* sottomenu */



#menu li#attiva li a {
border: none;
margin-left: 0.5em;





}





#menu li ul {
display: none;


}



#menu li#attiva ul {
width: 100%;
height: 2em; /*opera, firefox*/
line-height: 2em;

display: block;
margin: 0;
padding: 0;
position: absolute;

top: 1.5em;
left: 0;
border-bottom: 1px solid #787878;
background-color: #CEE7E7;


}







/***************************** contenuti */

h1 {
margin: 0 0.5em;
padding: 0;
}

#contenuti {
margin: 2em 0.5em;
padding: 10px;


}

myyoungfamily
06-16-2006, 03:32 PM
So, the sublevel text is pulled in from external html files?
-Jonathan

Twey
06-16-2006, 03:36 PM
Not insofar as I can tell, no. The "menu levels" are just all totally seperate HTML files.

myyoungfamily
06-16-2006, 03:39 PM
Ok, cool idea...
-Jonathan

Twey
06-16-2006, 03:59 PM
Not really, it's rather inefficient, and exceedingly difficult to do when one wants the menu across different pages, especially without server-side scripting.

greenweb
06-17-2006, 07:44 AM
hello boys, if tried the menu, can indicate the browser that used? Thanks

Twey
06-17-2006, 11:19 AM
Firefox... not that it matters, this will probably work in every modern browser.

chikkubhai
03-16-2008, 07:59 AM
hello boys, if tried the menu, can indicate the browser that used? Thanks

The example link is not working. Could somebody please update the link and how it works please or at least a working example and code.

-Thanks

chikkubhai
09-12-2008, 04:56 PM
any updates?