Hiya, How do you create a menu bar similar to the one found at the following URL, that resizes upon the Menu Item text being resized (See Second URL)? Purple Menu Bar: www.monster.co.uk/ Resizing Menu Bar: cms.template-help.com/magento_21845/ Many Thanks, FishSword
I'm not totally sure what you mean, if you want a horizontal navigation where as the buttons will stretch... there are many ways in which it could be done using lists and CSS: Making the dropdown menu's that appear when the link is hovered over requires more advanced techniques, is this what you were wanting? ul { list-style:none; padding:0px; margin:0px; width: 500px; height:30px; } ul li { float:left; } ul li a { display:block; padding:8px 20px; } Code (markup): That could be the CSS <ul> <li><a href="#">Navigation Button</a></li> <li><a href="#">Another Link</a></li> </ul> Code (markup): That is just off the top of my head, but it should give you a decent starting point. ( I hope )
Using the Purple Menu Bar on Monster.co.uk as an example, I'm trying to add the second shade of purple (Dark) as a background image. This background image should always stay at the bottom of the list (<ul>), revealing more of the first shade of purple (Light) upon the text being resized. Hope this makes sense!
You could add "background:url("---path/image name here---") repeat-x bottom;" to the ul style. That way, when the ul expands, it will stick to the bottom of the ul. (A narrow image (5px?) should suffice because you repeat it left to right, (x).) Hope that helps. If that's not what you mean, let me know. : )
Great Cheers! What's the best way to add rounded corners to the menu bar, so they also move when the <ul> expands?
Well, off the top of my head, (and this may not be the most dynamic solution), but I'd say adding the left corner to the first li and the right corner to the last li. For example: #li1{background:url("leftcorner.jpg") no-repeat top left;} #li1{background:url("rightcorner.jpg") no-repeat top right;} I think that would work. But if you try it and it doesn't, feel free to let me know. (By the way, it's cool that you're worried about text-resizing. It seems not enough people code their sites that way. I know there are certain times we may not be able to do that, but for most projects we can. It's a good habit to get into.)
Can you give me an example on how you would make the menu bar found at Monster.co.uk so that it resizes and changes colour upon being moused-over, only without the drop down?
Hmmm... let me think about that one. The issue is that :hover is only supported for anchor tags in IE6. I still try and code for it. Are you doing the same?
I suggested something similiar for another issue someone had earlier, (and usually I'm not one for adding extra markup), but you could try, for example: /*HTML*/ <a href="#"><span>text</span></a> /*CSS*/ #nav a{display:block;padding:5px;} #nav a:hover{background:url("dark.jpg") repeat-x top;} #nav #liFirst a:hover{background:url("lefttop-dark.jpg") repeat-x top left;padding:0px;} #nav #liFirst a:hover span{background:url("leftbottom-dark.jpg") repeat-x top;display:block;padding:5px;} /*If there will be a space in between, pick one of the colors and set either the anchor tag or the span to that color.*/ That seems like it should work... in theory. : ) You may need to play around with it.
Can you post a working example of how you would code the menu bar, so I can see how you would code it, and therefore adopt your techniques into my version?
I'll try, but I'm not sure I'll be able to do it tonight. I'll see what I can do. Or, maybe someone else will post a link. : )
I'll give it a shot, but I'm not sure the span thing is going to work. (Obviously it's an inline element, but I was thinking display:block would work so I could apply padding. I think I might be over-taxing my brain today! : ) I'll see if I can take a look at it again tomorrow.
Well, instead of an example, I have this: http://www.sitepoint.com/forums/showthread.php?t=594886&highlight=rounded+corners I didn't read through everything, but it seems like it might be a good solution for what you're trying to do. There are a lot of nested divs involved, but I guess it's a trade-off. (I was also going to suggest using a larger image, but I was thinking horizontally, not vertically.) I'm not sure the above solution in the link will take care of the gradient issues for you, but you can try it out. I have a hard time letting go of things I can't figure out. So, it's a little frustrating that I couldn't do this myself, but I also don't have the time to spend on it right now. (There's a lot of different issues/techniques involved.) If something changes, I'll let you know. Wish you the best! : )