Jump to content

CSS Menu

lowrentIT

By lowrentIT
in JavaScript

 Share

Recommended Posts

lowrentIT Newbie

lowrentIT

Posted
Posted

Can someone help me modify this so that the menu is vertical NOT horizontal.

<html><HEAD> <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: 1px solid black;border-left-width: 0;background-color: #D8FE89;}.headerlinks a{margin: auto 8px;font-weight: bold;color: black;}.submenus{display: none;width: 10em;position: absolute;top: 1.2em;left: 0;background-color: #EEFFCC;border: 1px solid black;}.submenus li{width: 100%;}.submenus li a{display: block;width: 100%;text-indent: 3px;}html>body .submenus li a{ /* non IE browsers */width: auto;}.submenus li a:hover{background-color: yellow;color: black;}#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 (http://www.javascriptkit.com)// Adopted from SuckerFish menu// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/// Please keep this credit intactstartMenu = function() {if (document.all&&document.getElementById) {cssmenu = document.getElementById("csstopmenu");for (i=0; i<cssmenu.childNodes.length; i++) {node = cssmenu.childNodes[i];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)elsewindow.onload=startMenu;</script></head><body><ul id="csstopmenu"><li class="mainitems" style="border-left-width: 1px"><div class="headerlinks"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div><ul class="submenus"><li><a href="http://javascriptkit.com/">Home</a></li><BR><li><a href="http://javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li><BR><li><a href="http://javascriptkit.com/javaindex.shtml">JavaScript tutorials</a></li><BR><li><a href="http://javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li><BR></ul></li><BR><li class="mainitems"><div class="headerlinks"><a href="http://www.javascriptkit.com">2nd Menu Item</a></div><ul class="submenus" style="width: 14em"><li><a href="">Sub 2 Item 1. Long text, long menu.</a></li><li><a href="">Sub 2 Item 2</a></li><li><a href="">Sub 2 Item 3.</a></li></ul></li><li class="mainitems"><div class="headerlinks"><a href="http://www.javascriptkit.com">3rd Menu Item</a></div><ul class="submenus"><li><a href="">Sub 3 Item 1</a></li><li><a href="">Sub 3 Item 1</a></li><li><a href="">Sub 3 Item 1</a></li><li><a href="">Sub 3 Item 1</a></li></ul></li></ul><div id="clearmenu" style="clear: left"></div><p style="font: normal 11px Arial">This free script provided by<br /><a href="http://www.javascriptkit.com">JavaScript Kit</a></p></body></html>

Link to comment
Share on other sites
Err Dedicated Member

Err

Posted
Posted

Just to tell you know, this is the javascript topic, there is a css topic also, but I'm sure a mod can/will move this for ya... so you don't have to make another one there also.Sorry I can't be of much help otherwise.

Link to comment
Share on other sites
scott100 Dedicated Member

scott100

Posted
Posted

There is javascript used in the menu so it's not pure css :) I have made a couple of change (in red), this should get you going in the right direction :)

<html><HEAD> <style type="text/css">#csstopmenu, #csstopmenu ul{padding: 0;margin: 0;list-style: none;[color="red"]width:130px;[/color]}#csstopmenu li{[color="red"]<!--float: left;-->[/color]position: relative;}#csstopmenu a{text-decoration: none;}.mainitems{border: 1px solid black;border-left-width: 0;background-color: #D8FE89;}.headerlinks a{margin: auto 8px;font-weight: bold;color: black;}.submenus{display: none;width: 10em;position: absolute;top: 1.2em;[color="red"]left: 120px;[/color]background-color: #EEFFCC;border: 1px solid black;}.submenus li{width: 100%;}.submenus li a{display: block;width: 100%;text-indent: 3px;}html>body .submenus li a{ /* non IE browsers */width: auto;}.submenus li a:hover{background-color: yellow;color: black;}#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 (http://www.javascriptkit.com)// Adopted from SuckerFish menu// For this and over 400+ free scripts, visit JavaScript Kit- [url="http://www.javascriptkit.com/"]http://www.javascriptkit.com/[/url]// Please keep this credit intactstartMenu = function() {if (document.all&&document.getElementById) {cssmenu = document.getElementById("csstopmenu");for (i=0; i<cssmenu.childNodes.length; i++) {node = cssmenu.childNodes[i];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)elsewindow.onload=startMenu;</script></head><body><ul id="csstopmenu"><li class="mainitems" style="border-left-width: 1px"><div class="headerlinks"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div><ul class="submenus"><li><a href="http://javascriptkit.com/">Home</a></li><BR><li><a href="http://javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li><BR><li><a href="http://javascriptkit.com/javaindex.shtml">JavaScript tutorials</a></li><BR><li><a href="http://javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li><BR></ul></li><BR><li class="mainitems"><div class="headerlinks"><a href="http://www.javascriptkit.com">2nd Menu Item</a></div><ul class="submenus" style="width: 14em"><li><a href="">Sub 2 Item 1. Long text, long menu.</a></li><li><a href="">Sub 2 Item 2</a></li><li><a href="">Sub 2 Item 3.</a></li></ul></li><li class="mainitems"><div class="headerlinks"><a href="http://www.javascriptkit.com">3rd Menu Item</a></div><ul class="submenus"><li><a href="">Sub 3 Item 1</a></li><li><a href="">Sub 3 Item 1</a></li><li><a href="">Sub 3 Item 1</a></li><li><a href="">Sub 3 Item 1</a></li></ul></li></ul><div id="clearmenu" style="clear: left"></div><p style="font: normal 11px Arial">This free script provided by<br /><a href="http://www.javascriptkit.com">JavaScript Kit</a></p></body></html>

Link to comment
Share on other sites
Err Dedicated Member

Err

Posted
Posted

oh I know that.. it's just that his topic says: "CSS Menu" and his problem is with CSS... so.. yeah. I didn't mean to sound rude, really.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...