Dark Knight Posted January 5, 2007 Share Posted January 5, 2007 Greetings, do you know how to make a menu? a link vertical menu. Can you show me a code for this? plzz thanks. Link to comment Share on other sites More sharing options...
Sniffy Posted January 5, 2007 Share Posted January 5, 2007 <html><head><style type='text/css'>.menu a{color: #000;text-decoration: none;}.menu a:hover{text-decoration: underline;}</style></head><body><div class='menu'><a href='java script: void(0)'>Link</a><br /><a href='java script: void(0)'>Link</a><br /><a href='java script: void(0)'>Link</a><br /><a href='java script: void(0)'>Link</a><br /><a href='java script: void(0)'>Link</a><br /></div></body></html> Nothing fancy but is that what you mean? Link to comment Share on other sites More sharing options...
jlhaslip Posted January 6, 2007 Share Posted January 6, 2007 http://www.jlhaslip.trap17.com/samples/2_col/index.html Link to comment Share on other sites More sharing options...
Dark Knight Posted January 6, 2007 Author Share Posted January 6, 2007 No not that kind of menu. When the mouse is pointed over a link, it should appear a list with some things that would be able to navigate to a page. Link to comment Share on other sites More sharing options...
Anders Moen Posted January 6, 2007 Share Posted January 6, 2007 You can get horizontal menus here and vertical menus here Link to comment Share on other sites More sharing options...
boen_robot Posted January 7, 2007 Share Posted January 7, 2007 Ummmm.... pretty much. Link to comment Share on other sites More sharing options...
Kevin M Posted January 7, 2007 Share Posted January 7, 2007 CSS is supposed to go in the <head> </head> section of the document.You paste the code inbetween <style type="text/css">YOUR CSS CODE HERE</style> Link to comment Share on other sites More sharing options...
Kevin M Posted January 7, 2007 Share Posted January 7, 2007 You can either add it into your existing CSS, like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>http://www.mbthjem.com/</title><style type="text/css"><!--body,td,th {font-family: Arial, Helvetica, sans-serif;color: #FFFFFF;}body {background-color: #000000;}a:link {color: #FFFFFF;}a:visited {color: #FFFFFF;}[b]CSS for Menu goes here[/b]--></style></head><body><div align="center"></div></body></html> Or, you can add another style sheet, like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>http://www.mbthjem.com/</title><style type="text/css"><!--body,td,th {font-family: Arial, Helvetica, sans-serif;color: #FFFFFF;}body {background-color: #000000;}a:link {color: #FFFFFF;}a:visited {color: #FFFFFF;}--></style>[b]<style type="text/css">CSS Menu Code Here</style>[/b]</head><body><div align="center"></div></body></html> That should work. Link to comment Share on other sites More sharing options...
Kevin M Posted January 7, 2007 Share Posted January 7, 2007 Shouldn't there be a HTML part in the Body section?? Would you not need more than <div align="center"></div> to get a menu? Link to comment Share on other sites More sharing options...
boen_robot Posted January 7, 2007 Share Posted January 7, 2007 Do you know CSS and HTML? I mean "at all"?!?!?!READ and READ!!!! Link to comment Share on other sites More sharing options...
Kevin M Posted January 7, 2007 Share Posted January 7, 2007 There's obviously going to be a HTML part to the menu. CSS does not make up the page, it just defines certain things. You can't only have a page of CSS, there has to be HTML too. Link to comment Share on other sites More sharing options...
Anders Moen Posted January 14, 2007 Share Posted January 14, 2007 I think I know what you've done wrong...when I looked at the last HTML code you posted, I saw you had closed one </style> too much. I'll set the whole code (that'll work) out here: <html><head><title>Dropdown menu</title><style type="text/css">.suckertreemenu ul{margin: 0;padding: 0;list-style-type: none;}/*Top level list items*/.suckertreemenu ul li{position: relative;display: inline;float: left;background-color: #F3F3F3; /*overall menu background color*/}/*Top level menu link items style*/.suckertreemenu ul li a{display: block;width: 90px; /*Width of top level menu link items*/padding: 1px 8px;border: 1px solid black;border-left-width: 0;text-decoration: none;color: navy;} /*1st sub level menu*/.suckertreemenu ul li ul{left: 0;position: absolute;top: 1em; /* no need to change, as true value set by script */display: block;visibility: hidden;}/*Sub level menu list items (undo style from Top level List Items)*/.suckertreemenu ul li ul li{display: list-item;float: none;}/*All subsequent sub menu levels offset after 1st level sub menu */.suckertreemenu ul li ul li ul{ left: 159px; /* no need to change, as true value set by script */top: 0;}/* Sub level menu links style */.suckertreemenu ul li ul li a{display: block;width: 160px; /*width of sub menu levels*/color: navy;text-decoration: none;padding: 1px 5px;border: 1px solid #ccc;}.suckertreemenu ul li a:hover{background-color: black;color: white;}/*Background image for top level menu list links */.suckertreemenu .mainfoldericon{background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;}/*Background image for subsequent level menu list links */.suckertreemenu .subfoldericon{background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;}* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/padding-top: 1em;} /* Holly Hack for IE \*/* html .suckertreemenu ul li { float: left; height: 1%; }* html .suckertreemenu ul li a { height: 1%; }/* End */</style><script type="text/javascript">var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commasfunction buildsubmenus_horizontal(){for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon" } else{ //else if this is a sub level menu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon" } ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.visibility="visible" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.visibility="hidden" } } }}if (window.addEventListener)window.addEventListener("load", buildsubmenus_horizontal, false)else if (window.attachEvent)window.attachEvent("onload", buildsubmenus_horizontal)</script></head><body><p>Here comes the dropdown menu :)</p><br /><br /><div class="suckertreemenu"><ul id="treemenu1"><li><a href="#" style="border-left: 1px solid black">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul></li><li><a href="#">Item 3</a></li><li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Sub Item 2.1.3</a></li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li></ul></a></li><li><a href="#">Item 4</a></li></ul><br style="clear: left;" /></div><p id="iepara">And here comes the rest of whatever's gonna be here :)</p></body></html> This should work Link to comment Share on other sites More sharing options...
Dark Knight Posted January 14, 2007 Author Share Posted January 14, 2007 Thanks andersmoen, that indeed worked Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now