Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Support
  • Code University
  • Drop menus clean up
Hey, welcome to ZBCode, the premier coding forum for ZB. Here you fill find some of the best Invisionfree and Zetaboards Codes on the network! Unfortunately, you're sorta hovering around in guest mode at the moment; why not join in on the fun? Register an account and you can start accessing the wealth of resources we have available here. Enjoy your stay at ZBCode, and remember to tell all your friends about us; the more members, the more codes available. ;)

Interested in joining? Click here.


If you are already a member of ZBCode, feel free to login right here:

Username:   Password:
Locked Topic
Drop menus clean up
Tweet Topic Started: Apr 4 2009, 04:03 PM (255 Views)
lirts Apr 4 2009, 04:03 PM Post #1


Posts:
204
Group:
Member
Member
#207
Joined:
Jul 22, 2008
Coding language
HTML/CSS
Okay, so I made this code here and it has a couple of problems and I'd like to clean it up a bit. I just don't know how and I've tried everything I can think of.

First problem is, when you hover over the menu and try to click the dropped links it sometimes goes away. I want to fix that but I couldn't find a way. I thought if I changed the height of the #dropmenu to 100% that it would work but it doesn't. That would also be why the dropped links are slightly over the menu.

Second, I'd like to find a better way to make the menu more customizable by giving each drop down a separate image but also cut down on CSS code. (may not be possible?) I did have it so that each of them had a separate div tag but that added alot of extra code.

I guess that's all for now. Unless someone can find something else that I could fix.
Edited by lirts, Apr 4 2009, 04:04 PM.
"We fear that which we do not see."

"Our minds are limited by what we know, not what we believe."
Posted Image
Legion of Shadows! Join The Community! Join The RP! Join the Legion!! Click the pic to view!

Offline Profile Goto Top
 
Kevin Apr 4 2009, 10:16 PM Post #2
Member Avatar


Posts:
700
Group:
Former Staff
Member
#8
Joined:
Jul 2, 2008
Coding language
HTML/CSS
I tried to figure out how to fix you're first issue, and couldn't find anything that worked really, though I'm going to continue trying...

Anyway, I was very (and I emphasize very :P ) bored, so I basically went through and made a lot of changes to your code that I thought cleaned it up. I'm not trying to be critical of yours, these are just suggestions. Everybody codes differently, so feel free to ignore me if you want to. :)

http://s1.zetaboards.com/kevin_1/index/ - That's where you can see what it looks like if you want.

I found that your HTML had a lot of tags that were just making it more complicated than it needed to be, so I condensed a lot of it. Here's what it came out like:
Code:
 
<!-- drop menu made by Lirts -->
<!-- drop menu start -->
<ul id="dropmenu">
<!-- block -->
<li>option 1
<ul>
<li><a href="#">link 1</a></li>
</ul>
</li>
<!-- block end -->
<!-- block -->
<li>option 2
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
</li>
<!-- block end -->
</ul>
<!-- drop menu end -->

And obviously more depending on how many different blocks you want.

Personally, I don't like having something like #dropmenu ul ul ul in my CSS, I find it to be confusing. I tried to make it as easy to follow as possible, as well as consolidate what could be consolidated.
Code:
 
/* Drop Menu made by Lirts*/
#dropmenu {
background:url(http://z3.ifrm.com/static/1/css/h2s.png) repeat-x top #FB9D3A ;
color:#fff;
border:1px solid #E77700;
margin:0;
padding:0;
list-style: none;
height:15px;
text-align:center;
}
#dropmenu a, #dropmenu a:hover {
background-color: #F6F6F6;
display: block;
padding: 3px 0;
border: 1px solid #E7E7E7;
font-size:10px;
text-align:center;
width:11.4em;
}
#dropmenu li {
position:relative;
float:left;
cursor:pointer;
width: 9em;
}
#dropmenu li ul {
position: absolute;
list-style: none;
z-index: 1000;
display: none;
margin:0;
padding:0;
}
#dropmenu li:hover ul{
display: block;
}


For the most part, the CSS is just a more condensed version of yours (though with changes to make it match the new HTML). I made a few changes to it that are more personal preferences for me. For example: #dropmenu li, I added in cursor:pointer, but that's just something I prefer really when I'm browsing a page.

Anyway, I hope you don't mind that I did all this. Hopefully you can get some ideas from seeing what I've done on how to clean it up and whatnot. If you have any questions, I'd be happy to answer them. :)

For your second question, I'm not sure of a way of doing it that wouldn't include adding in more code (either HTML or CSS), but if I get time tomorrow I can try to think of something.
Posted Image
Offline Profile Goto Top
 
lirts Apr 6 2009, 04:17 PM Post #3


Posts:
204
Group:
Member
Member
#207
Joined:
Jul 22, 2008
Coding language
HTML/CSS
It looks good, just something I noticed though is it doesn't work in IE7. But I was expecting that. lol
"We fear that which we do not see."

"Our minds are limited by what we know, not what we believe."
Posted Image
Legion of Shadows! Join The Community! Join The RP! Join the Legion!! Click the pic to view!

Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Code University · Next Topic »
Locked Topic

Track Topic · E-mail Topic Time: 7:48 PM Jul 10
Hosted for free by ZetaBoards · Privacy Policy