Jump to content

Newgrounds Menubar


JustRob
 Share

Recommended Posts

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

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

<!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

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

×
×
  • Create New...