I received several e-mail requests to create vertical examples of the menus. During the Easter holidays I did them, but had no time to write event the shortest entry afterwards. (Is it just me or the amount of work that piles up while being on any holiday is so big that quickly burns any freshness from it?)
So, not to delay this anymore, I have created vertical examples.
Changes are few. What I did was to move the basic CSS rules used for submenus to the main menu as well, and re-style the main menu so that it sits comfortably at the left side.
#menu li {
margin: 0;
padding: 0;
border: 0;
width: 100%;
display: block;
float: left;
position: static;
}
html>body #menu li {
float: none;
position: relative;
}
#menu li:hover {
position: relative;
}
#menu li ul {
top: 0;
left: 100%;
}
#menu {
...
width: 120px;
height: auto;
}
Stronged parts are the essential changes. Rest of the changes in the actual menu’s CSS is just designs. You should make sure, as shown above, that height is not restricted and that width is restricted, because the LIs have 100% width.
how to make a “drop-up” menu version of the minitabs example (http://www.aplus.co.yu/sparks/adxmenu/examples2/minitabs/)?
tnx
This is an interesting challenge, xeon. I’ll try when time permits, and would certainly welcome any examples.
many thanks …
I have found this example:
http://www.hszk.bme.hu/~hj130/css/list_menu/hover/example_menu_drop_up.html
i hope this can help you
I have not been able to adapt it to your minitabs example =(
I am using the version with out the csshover.htc and just the javascripts to make it work and was wondering does this vertical example work with it?
For some reason i have tried using the csshover.htc and made it an absolute url and anything else i could think of but it just wil not work for me when i upload to the server so i have had to use the javascript only version.
I have tried changing the style sheet but it does not seem to work and stil places them under each main menu item.
here is what i have in my style sheet :
#menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
#menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
width: 100%;
float: left;
position: static;
}
#menu a {
float: left;/* \*/float: none;/* */
display: block;
}
#menu li ul {
visibility: hidden;
position: relative;
z-index: 10;
top: 0;
left: 100%;
}
#menu li ul li {
width: 100%;
display: block;
float: left;
position: static;
}
html>body #menu li ul li {
float: none;
position: relative;
}
#menu li ul li:hover, * html #menu li ul li.iehover {
position: relative;
}
/* fix the position */
#menu li ul li ul {
top: 0;
left: 100%;
}
/* simulate child selector for IE */
* html div#menu li.iehover ul, * html #menu li.iehover li.iehover ul, * html #menu li.iehover li.iehover li.iehover ul {
visibility: visible;
}
* html #menu li.iehover li ul, * html #menu li.iehover li.iehover li ul, * html #menu li.iehover li.iehover li.iehover li ul {
visibility: hidden;
}
/* do the normal show, with increased specificity */
ul#menuList li:hover > ul {
visibility: visible;
}
/* – Make-up
I have download Static Top Menu from Dynamicdrive.com
(http://dynamicdrive.com/dynamicindex1/sm/index.htm)
How I can transform horizontal static top menu to vertical?