JustRob Posted May 24, 2012 Share Posted May 24, 2012 Sorry for making a new topic once more, but this is something a bit different. I want to make a menu like Newgrounds currently has. A menubar consisting of one image (sprite), with the buttons next to each other and the hover buttons beneath them. And also, a sub-menu with more links when you hover over certain buttons. Now, I pretty much have the menu, but not the sub-menu. Is this done with a javascript? How would I go about pulling that off? What I currenty have: http://www.robbertbruggeman.nl/ Just inspect the source to check it out, it's just a menu using one image. Link to comment Share on other sites More sharing options...
JustRob Posted May 24, 2012 Author Share Posted May 24, 2012 Ugh this is driving me nuts. I hope you guys can spare some time to help me out in the next few days. Here's what I got so far: HTML <ul class="menu1"><li><a id="left"></a></li><li class="current"><a id="home" href="index.html"><b>Home</b></a></li><li><a id="about" href="about me/about.html"><b>About Me</b></a></li><li><a id="projects" href="projects/projects.html"><b>Projects</b></a></li><li><a id="gallery" href="gallery/gallery.html"><b>Gallery</b></a></li><li><a id="contact" href="contact/contact.html"><b>Contact</b></a></li><li><a id="right"></a></li></ul> CSS .menu1 li b{ text-indent: -9999em; display: block;}.menu1{ height: 50px; width: 800px; text-transform: uppercase; padding: 0px; margin-left: auto; margin-right: auto;}.menu1 li{ float: left; height: 100%; list-style-type: none;}.menu1 a{ float: left; display: block; height: 100%; text-align: center; text-decoration: none; color: #FFF; width: 100%; background: url(menu/menubar.png) no-repeat;}.menu1 a#left{ width: 111px; background-position: 0 0;}.menu1 a#right{ width: 111px; background-position: right 0;}.menu1 a#home{ width: 87px; background-position: -111px 0;}.menu1 a#about{ width: 131px; background-position: -198px 0;}.menu1 a#projects{ width: 126px; background-position: -329px 0;}.menu1 a#gallery{ width: 115px; background-position: -455px 0;}.menu1 a#contact{ width: 119px; background-position: -570px 0;}.menu1 a#home:hover, .menu1 .current a#home{ background-position: -111px bottom;}.menu1 a#about:hover, .menu1 .current a#about{ background-position: -198px bottom;}.menu1 a#projects:hover, .menu1 .current a#projects{ background-position: -329px bottom;}.menu1 a#gallery:hover, .menu1 .current a#gallery{ background-position: -455px bottom;}.menu1 a#contact:hover, .menu1 .current a#contact{ background-position: -570px bottom;} What I want is drop-down menu's for some of the buttons when you mouse over them. Not all of them though. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 24, 2012 Share Posted May 24, 2012 <!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=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">.menu1, .menu1 li, .menu1 ul {margin:0; padding: 0; text-indent:0; list-style-type: none;}.menu1 li b{ text-indent: -9999em; display: block;}.menu1 li ul b{ text-indent: 0; display: block;}.menu1{ height: 50px; width: 800px; text-transform: uppercase; padding: 0px; margin-left: auto; margin-right: auto;}.menu1 li{ float: left; height: 100%; position: relative; /*added by dsonesuk*/}.menu1 li ul{ height: 30px;position: absolute; /*added by dsonesuk*/left: -99999em;top:50px;width:200px;}.menu1 li ul li{float:none;width: 100%;}.menu1 li ul a{background: none;background-color:#63F;color: #000;}.menu1 a{ float: left; display: block; height: 100%; text-align: center; text-decoration: none; color: #FFF; width: 100%; background: url(menu/menubar.png) no-repeat;}.menu1 a#left{ width: 56px; background-position: 0 0;}.menu1 a#right{ width: 56px; background-position: right 0;}.menu1 a#home{ width: 87px; background-position: -56px 0;}.menu1 a#about{ width: 130px; background-position: -143px 0;}.menu1 a#projects{ width: 126px; background-position: -385px 0;}.menu1 a#gallery{ width: 115px; background-position: -511px 0;}.menu1 a#contact{ width: 118px; background-position: -626px 0;}.menu1 a#home:hover, .menu1 .current a#home{ background-position: -56px bottom;}.menu1 a#about:hover, .menu1 .current a#about{ background-position: -143px bottom;}.menu1 a#projects:hover, .menu1 .current a#projects{ background-position: -385px bottom;}.menu1 a#gallery:hover, .menu1 .current a#gallery{ background-position: -511px bottom;}.menu1 a#contact:hover, .menu1 .current a#contact{ background-position: -626px bottom;}.menu1 li:hover ul {left:0px;}.menu1 ul a:hover { background-color:#06F;}</style></head><body><ul class="menu1"><li><a id="left"></a></li><li class="current"><a id="home" href="index.html"><b>Home</b></a></li><li><a id="about" href="about me/about.html"><b>About Me</b></a></li><li><a id="projects" href="projects/projects.html"><b>Projects</b></a></li><li><a id="gallery" href="gallery/gallery.html"><b>Gallery</b></a><ul><li><a href="gallery/gallery.html"><b>sub Gallery1</b></a></li><li><a href="gallery/gallery.html"><b>sub Gallery2</b></a></li><li><a href="gallery/gallery.html"><b>sub Gallery3</b></a></li><li><a href="gallery/gallery.html"><b>sub Gallery4</b></a></li></ul></li><li><a id="contact" href="contact/contact.html"><b>Contact</b></a></li><li><a id="right"></a></li></ul></body></html> 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