1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

NavBar

Discussion in 'HTML & Website Design' started by BrandonRoberts, Jul 4, 2013.

  1. #1
    Hello eveyone. I have a quick question hopefully someone can give me some advice. I have attached a photo of the nav bar I would like to implement on my website. I would like for it to work as by the background box hovering over which ever link my curser hovers over with the text changing to white. As in thew picture. What code would I want to use for this effect?

    nav.fw.png
    BrandonRoberts, Jul 4, 2013 IP
  2. ekim941

    ekim941 Member

    Messages:
    74
    Likes Received:
    7
    Best Answers:
    7
    Trophy Points:
    33
    #2
    For your HTML, you should structure your navigation something like this:
    Code (Text):
    1. <div id="nav">
    2. <ul>
    3. <li><a href="#">Home</a></li>
    4. <li><a href="#">About</a></li>
    5. <li><a href="#">Services</a></li>
    6. <li><a href="#">Contact</a></li>
    7. </ul>
    8. </div>
    Then, the effect you want to create can be done with CSS:
    Code (Text):
    1. #nav ul{
    2. margin: 0;
    3. padding:0;
    4. list-style-type:none;
    5. }
    6. #nav li{
    7. display:inline;
    8. }
    9. #nav li a{
    10. display:block;
    11. padding:5px 10px;
    12. text-align:center;
    13. float:left;
    14. color:#777;
    15. -webkit-border-radius: 5px;
    16. -moz-border-radius: 5px;
    17. border-radius: 5px;
    18. }
    19. #nav li a:hover{
    20. color:#fff;
    21. background:#777;
    22. }
    What I did here was take the unordered list and remove the margin or padding that makes it indent as well as the disks that would normally show up.
    Then, We made the list items display on the same line.
    Then we have to make the "a" elements display as block-level rather than inline so we can give them a width and height.
    On the hover pseudo-element, we make the background dark and the color of the text white.
    ekim941, Jul 7, 2013 IP
  3. BrandonRoberts

    BrandonRoberts Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thank you very much! You are very helpful.
    BrandonRoberts, Jul 7, 2013 IP