Hi, I'm using the CSS Top Menu from Javascript Kit and trying to customize it. The problem I have is that I want the menu drop-downs to be separate from the header links (not much separation, but more than the default setting), but if I set the "top" attribute in submenus style to great than 1.4 em, the menus will display, then behave strangely (can't select the contents, etc.) I also need to modify this so the menus will be separate in Firefox and other non-IE browsers. So I'm looking for a solution. Any ideas?
Here's my code so far:
<style type="text/css">
#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}
#csstopmenu li{
float: left;
position: relative;
}
#csstopmenu a{
text-decoration: none;
}
.mainitems{
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left-width: 0;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000;
}
.headerlinks {
margin: auto 8px;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000;
color: black;}
.headerlinks a:hover{
background-color: #ffffff;
color: #FF0000;
}
.submenus{
display: none;
width: 15em;
position: absolute;
top: 1.4em;
left: 0;
background-color: #f6f6f6;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #000000;
}
.submenus li{
width: 100%;
}
.submenus li a{
display: block;
width: 100%;
text-indent: 8px;
}
html>body .submenus li a{ /* non IE browsers */
width: auto;
}
.submenus li a:hover{
background-color: #f6f6f6;
color: #FF0000;
}
#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}
#csstopmenu li:hover ul, li.over ul {
display: block;
}
html>body #clearmenu{ /* non IE browsers */
height: 3px;
}
</style>
<script type="text/javascript">
// CSS Top Menu- By JavaScriptKit.com (<!-- m --><a class="postlink" href="http://www.javascriptkit.com">http://www.javascriptkit.com</a><!-- m -->)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- <!-- m --><a class="postlink" href="http://www.javascriptkit.com/">http://www.javascriptkit.com/</a><!-- m -->
// Please keep this credit intact
startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}
if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;
</script>
</head>
<body>
<ul id="csstopmenu">
<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.javascriptkit.com">JavaScript Kit</a></div>
<ul class="submenus">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptkit.com/">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptkit.com/javaindex.shtml">JavaScript tutorials</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.javascriptkit.com">2nd Menu Item</a></div>
<ul class="submenus" style="width: 14em">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 2 Item 1. Long text, long menu.</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 2 Item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 2 Item 3.</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.javascriptkit.com">3rd Menu Item</a></div>
<ul class="submenus">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 3 Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 3 Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 3 Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 3 Item 1</a></li>
</ul>
</li>
</ul>
Thanks for any help
That is quite a messy script( at lest IMO). There is a great drop down menu system that I use.
Click Here (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->) to see a demo.
Its a nice and simple script to use.
If you dont like that one, I use a pure Java script menu system. I dont have a howto page on it, but the script can be located Here (<!-- m --><a class="postlink" href="http://www.gslc.qld.edu.au/newpage/gslc(noosa(text">http://www.gslc.qld.edu.au/newpage/gslc(noosa(text</a><!-- m -->))/index.htm).
Also, I would like to help with your problem(rather then just give options to get around it), but I cant see the error without seeing the page. Can you please post a link for the webpage.
Wofen
PS: The link should be fixed.Thanks for the reply
The 2nd link you provided doesn't work, can you repost maybe?
The script I'm using now is eerily similar to the ALA one you linked me to. It uses the same javascript (just changes some names). If you copy and paste the code I posted into a blank HTML doc and just view it locally, you should be able to see the issue. Trying change to "top" attribute in submenus to 1.6 and you won't be able to select any of the drop-down menu contents, the menus flicker on and off. Can't figure out what causes that.
ThanksAs soon as your mouse leaves the menu on its way to the way to the submenu the submenu turns off (or tries to). The submenus have to have to be nearly contiguous to the main menu so that the cursor doesn't lose cont act.Oh, if thats the problem(It would be easyer with a web page), Change the padding. I am not 100% sure that it would work on this example(I really want a example), but I know in alot of the CSS menu systems out there can use the padding to extend the box that the mouse is considered over the box.
Wofen
Here's my code so far:
<style type="text/css">
#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}
#csstopmenu li{
float: left;
position: relative;
}
#csstopmenu a{
text-decoration: none;
}
.mainitems{
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left-width: 0;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000;
}
.headerlinks {
margin: auto 8px;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000;
color: black;}
.headerlinks a:hover{
background-color: #ffffff;
color: #FF0000;
}
.submenus{
display: none;
width: 15em;
position: absolute;
top: 1.4em;
left: 0;
background-color: #f6f6f6;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #000000;
}
.submenus li{
width: 100%;
}
.submenus li a{
display: block;
width: 100%;
text-indent: 8px;
}
html>body .submenus li a{ /* non IE browsers */
width: auto;
}
.submenus li a:hover{
background-color: #f6f6f6;
color: #FF0000;
}
#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}
#csstopmenu li:hover ul, li.over ul {
display: block;
}
html>body #clearmenu{ /* non IE browsers */
height: 3px;
}
</style>
<script type="text/javascript">
// CSS Top Menu- By JavaScriptKit.com (<!-- m --><a class="postlink" href="http://www.javascriptkit.com">http://www.javascriptkit.com</a><!-- m -->)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- <!-- m --><a class="postlink" href="http://www.javascriptkit.com/">http://www.javascriptkit.com/</a><!-- m -->
// Please keep this credit intact
startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}
if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;
</script>
</head>
<body>
<ul id="csstopmenu">
<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.javascriptkit.com">JavaScript Kit</a></div>
<ul class="submenus">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptkit.com/">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptkit.com/javaindex.shtml">JavaScript tutorials</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.javascriptkit.com">2nd Menu Item</a></div>
<ul class="submenus" style="width: 14em">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 2 Item 1. Long text, long menu.</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 2 Item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 2 Item 3.</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.javascriptkit.com">3rd Menu Item</a></div>
<ul class="submenus">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 3 Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 3 Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 3 Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Sub 3 Item 1</a></li>
</ul>
</li>
</ul>
Thanks for any help
That is quite a messy script( at lest IMO). There is a great drop down menu system that I use. Click Here (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->) to see a demo.
Its a nice and simple script to use.
If you dont like that one, I use a pure Java script menu system. I dont have a howto page on it, but the script can be located Here (<!-- m --><a class="postlink" href="http://www.gslc.qld.edu.au/newpage/gslc(noosa(text">http://www.gslc.qld.edu.au/newpage/gslc(noosa(text</a><!-- m -->))/index.htm).
Also, I would like to help with your problem(rather then just give options to get around it), but I cant see the error without seeing the page. Can you please post a link for the webpage.
Wofen
PS: The link should be fixed.Thanks for the reply
The 2nd link you provided doesn't work, can you repost maybe?
The script I'm using now is eerily similar to the ALA one you linked me to. It uses the same javascript (just changes some names). If you copy and paste the code I posted into a blank HTML doc and just view it locally, you should be able to see the issue. Trying change to "top" attribute in submenus to 1.6 and you won't be able to select any of the drop-down menu contents, the menus flicker on and off. Can't figure out what causes that.
ThanksAs soon as your mouse leaves the menu on its way to the way to the submenu the submenu turns off (or tries to). The submenus have to have to be nearly contiguous to the main menu so that the cursor doesn't lose cont act.Oh, if thats the problem(It would be easyer with a web page), Change the padding. I am not 100% sure that it would work on this example(I really want a example), but I know in alot of the CSS menu systems out there can use the padding to extend the box that the mouse is considered over the box.
Wofen