1

Long time!! :)

I would appreciate if someone can help me with this, it's a jquery menu that I've been using for my website, I would like to know if it's possible to:

Menu Bar at Jsfiddle

  • Put some vertical line separator on each option of the menu to separate them without being affected by the hover effect like the text option.

  • add to the menu on the corner end on the right a small ''social media'' icons (img) each one directing to a specific link just like the text menu. The menu fits the website content (940px width) and has extra space but in the fiddle example it doesn't show.

  • also important> is there a way to add a bigger text on the menu and make each menu word option bigger by stretching it? Looks pretty small.Horizontally I mean, vertically it stays the same.

It's important that the underline hover and the rest appears the same just like it's shown in jsfiddle without being affected by these possible changes.

I would deeply appreciate it!!! :)

Sol
  • 195
  • 1
  • 4
  • 14

1 Answers1

1

There are a few CSS and markup changes you can make to achieve what you'd like

#example-one { margin: 0 auto; list-style: none; position: relative; width: 940px; font-family:Arial; }
#example-one li a { color: #bbb; font-size: 14px; letter-spacing:2px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; border-right: 1px solid white; }
#example-one li:first-child a { border-left:1px solid white; }
  1. On the first line, you can add your font-family to change the font used in your menu.
  2. On the second line, I added a border-right, and set letter-spacing:2px.
  3. I added the third line to give a border-left to only the first item (so that you get the full appearance of separators).

Also I added this item to your list that you could easily insert a social media icon into:

<li style="float:right;"><a style="border:none;" href="#">Social Icon</a></li>

You can push it to the right side of the menu using float:right.

Here is an updated fiddle.

Goose
  • 3,241
  • 4
  • 25
  • 37
  • Thank you for helping, Sorry I took too long, I was posting another issue with a news scroller, I'm looking at fiddle, how would I be able to insert the image of the social icon instead of the text? – Sol Jan 03 '14 at 23:46
  • Just replace "Social Icon" with an `img` tag. – Goose Jan 03 '14 at 23:49
  • I'll try it now on the website and let you know in a sec, thank you, I really appreciate all the help – Sol Jan 03 '14 at 23:51
  • I checked it and it works great but now IE gives me an error:Webpage error details Message: Expected '}' Line: 34 example.js – Sol Jan 03 '14 at 23:59
  • also is there a way to make more space between the text? – Sol Jan 04 '14 at 00:01
  • It sounds like you are just missing a closing bracket somewhere in your js file, the line number should help you find where. You can use a service like jslint.com to validate your js. For space between text, do you mean between links? Try increasing the left/right padding in the `#example-one li a` CSS element. – Goose Jan 04 '14 at 00:04
  • Found the error! Thank you so much for you time and help, deeply appreciate it :) A relief, now the menu has more character. I'm sorry if I'm intruding with one more question if you can please check it out only if you can, the thing is that I don't know what do, until the news scroller is sorted I'm kinda stuck with the entire website, the link of the question is : http://stackoverflow.com/questions/20914731/scrolling-news-ticker-jquery – Sol Jan 04 '14 at 00:13
  • Sorry for disturbing again but is there a way to remove the first line before "home " and last line at the end of "contact"? keeping the rest of the lines there. – Sol Jan 04 '14 at 20:17
  • 1
    don't forget to mark as answer if this helped you, if I get a chance I'll try to look at the other. To remove the lines you'll just have to adjust the border styling. – Goose Jan 06 '14 at 20:38