Jump to content
Stef's Coding Community
Susie

Need help coding a menu

Recommended Posts

I've attached an image to show what the menu should look like...

 

How would you go about slicing and coding this? I thought of using the white "slash" between menu items as a background on the a items. That didn't work. Then I thought of setting them as list-style-image and that didn't work for me either.

 

I'm stumped.

 

Not to mention....I have no idea how I'll get that bee in there. And the shadow under the menu is giving me fits, too. :(

 

http://tinyurl.com/398qr3c

buzz-header.jpg

Share this post


Link to post
Share on other sites

Have you tried a border image for the right border that's an orange rectangle with the white slash slicing through it? Maybe big enough so no padding is needed between two menu items, then just use a background image that's 1 px wide and orange with the shadow attached behind the menu text?

 

I haven't tried it, but it seems that this might work.....

Share this post


Link to post
Share on other sites

It's extra complicated if you need to change those nav items on rollover (change the item's bg color, for example). If you need that sort of functionality, you'd probably need to either change the design, or build something custom in javascript/jquery.

 

Assuming you don't need rollovers, I would do something along the lines of what Andrea was saying, except use padding to add some right spacing to the nav item and a right aligned background image showing the right edge of the left nav item, the white slash, and the left edge of the next nav item. (The last item in the nav would just need to show the end of the nav item, no start of the next nav item)

 

The shadow should probably be a bottom aligned background image within your nav div, assuming you have a structure something like this:

 

<div id="nav">
 <ul>
   <li>list item</li>
   <li>list item</li>
   <li>list item</li>
 </ul>
</div>

Share this post


Link to post
Share on other sites

Prob be easiest to just make that whole nav a sprite based image. Although I'd have to do some looking myself to figure out how to produce the slants in Photoshop.

Share this post


Link to post
Share on other sites

Susie, using CSS sprites seems the most suitable way here indeed. So you work with just 2 big menu images - one for normal state and one for hover. The rest is up to CSS.

Share this post


Link to post
Share on other sites

It's possible to achieve this hover effect. You will have to apply a <span> tag to the end of the <a> tag and then use a little positioning.

 

First you will need two but small images. One will be for the right and the other for the left. Both will show the full angled stripe.

 

You will then apply the left image to the <a> tag and the right image to the <span> tag.

 

Next you will have to adjust the <a> right/left padding. Depending on the width of the angled image you will need to add that amount to the right padding. For example, if you give the right padding 10px, then add the image's width plus the 10px padding.

 

Your html will be like this:

 

<a href="">Get The Buzz<span></span></a>

 

Apply the right image to the span tag child to a:hover via using CSS background. Be sure to give it a fix height and width and then finally position it along with z-index. It will look something like this:

 

#nav li a:hover span {

display: block;

position:absolute;

z-index: 100;

top: 0px;

right: -40px; /*this negative positioning needs to match the span width which matches the image's width*/

width: 40px;

height: 28px;

background: #fe8f37 url('right-image.gif') no-repeat; /*change the background color to be whatever hover color you desire*/

}

 

 

Maybe a little later I can dress one up for you (skeleton version).

Share this post


Link to post
Share on other sites

Thanks, everyone. I'm trying to process all the suggestions and figure this thing out. :)

 

The only thing that needs to change on hover is the font color. I just implemented that. Also, this is a dynamic menu since the site is powered by WordPress, so I don't think sprites would do it here. I need the menu to change automatically as my client makes changes to the site.

 

One more time, I wanted to try using a background image on the list items and I'm using this line of CSS:

 

background: #ff7101 url(images/nav-border.png) no-repeat 80px 0;

 

I figure since I only need the slash to show on the right of the menu items, it might work this way. But as you can see ( http://tinyurl.com/398qr3c ), it's not quite right. I don't know if it's because of the way I sliced the image or the various padding/positioning that I'm using. And for some reason, the slash isn't even showing after the Home link.

 

I would love to decrease the padding between the menu items and have that slash just show on the right side of each link.

 

BTW, this isn't my design and there's not a lot of freedom to change it, so I need to make it work. :)

 

Thanks again for any ideas!

Edited by Susie

Share this post


Link to post
Share on other sites

On phone so can't see how you did it. Looks like you put the stripe on the li yeah? Maybe a easy way would be to just put the stripe in a span. li span {position:absolute;right:-20px; }

Share this post


Link to post
Share on other sites

Yeah, it's on the #nav li a:

 

#nav li a {

background: #ff7101 url(images/nav-border.png) no-repeat 80px 0;

}

 

I will have to look into adding a span. I'm not quite sure how to do that with a WordPress menu.....

 

Thanks for the idea. :)

Share this post


Link to post
Share on other sites

If you change your background image position to "top right" and use padding-left:0 and padding-right:50px; that should be pretty close, at least on Firefox.

 

With those changes in place, you should probably also add a bit of left padding on #nav ul.

Share this post


Link to post
Share on other sites

Thanks so much, everyone. :) I SO appreciate your input!!

 

I think I'm pretty close now (need to tweak in IE and possibly others). I didn't think of using "top right". :rolleyes:

 

Now I just need to figure out the drop shadow and bee. I'm thinking the bee could be absolutely positioned somehow. Would you agree?

Share this post


Link to post
Share on other sites

The only issue I see is the hover. If you hover over the right of the text it will stay in the hover state until you begin hovering over the next link's text.

 

Unless you are planning on using the background image for hover, I would think that you ought to move the background image from the <a> over to the <li> tag and then adjust the <a> tag's padding right to be margin right instead.

 

One last thing, in regards to the bee, I think you ought to move it in by about 40px because for those that are viewing the site in 1024 resolution will only see the hands.

 

Update: Moving the bee in will require you to give the nav unordered list a z-index so that you can click on the 'Ho' of the link 'Home'

Edited by newseed

Share this post


Link to post
Share on other sites

Thanks, Eddie. I will definitely bring up the bee issue with my client. I have a lot of other issues in this whole design to work out, too. My client decided to have his graphic designer create the design and have me develop the site. Well, the problem is that the graphic designer is not as experienced in web design and didn't take into account certain things about designing for the web.

Share this post


Link to post
Share on other sites

Ah! Well, I deal with them all the time and no two designers are alike but the ones that doesn't have at least the basic concept of web design are the most difficult to deal with.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...