SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Properly create centered vertical navigation list with a hover image on both sides?

    Hello,

    I have a navigation list I placed inside of a <ul>, I am attempting to get an image that appears on both sides of a link when you hover. Basically a an arrow on each side of the link.

    I have managed to get the effect I am looking for with:

    Code:
    <ul>
              <li style=""> <a href="#">Services</a> </li>
              <li> <a href="#">About</a> </li>
              <li> <a href="#">Media</a> </li>
              <li> <a href="#">FAQ</a> </li>
              <li> <a href="#">Portfolio</a> </li>
              <li> <a href="#">Contact</a> </li>
            </ul>
    Code:
    .nav ul{
        list-style:none;
        text-align:center;
    
    }
    
    
    .nav li:hover a:before, .nav li:hover a:after {
        content:url(../images/nav_bullet.png);
    }
    The end result will look like the following but with the list centered:
    link
    >> Hovered Link <<
    link

    However I am not sure if that is the best way of going about it, and the image is too close to the text. I tried placing a margin and padding but that didn't work. To top of it off, the image is not vertically centered with the link text.

    Anyone know of a proper way to do this as I am just going by trial and error?

    Thank you in advance!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    If you give the parent element position: relative, you can give those pseudo elements position: absolute and position them more exactly.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ralph said you could place those elements absolutely with the benefit that they won't upset the flow of the page and that you can also place them exactly.

    Using your existing method you could also tweak things like this but will only work on centred lists otherwise the text may jump when hovered.

    Code:
    .nav li:hover a:before, .nav li:hover a:after {
    content:url(../images/nav_bullet.png);
    margin:0 5px;/* horizontal margin*/
    position:relative;
    top:2px;/* or what ever you need */
    }

  4. #4
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys are amazing!!! Thank you so much, works flawlessly!

    One quick question though, is this the method either of you would use to create the same type of effect or would you go a different route? I am doing everything by trial and error and I know there is a million ways to accomplish a single thing but I would like to make sure I am going the proper route regarding standards, compliance, and compatiblility rather than just crazy gluing something together so it works .

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    One thing i would do differently is define the pseudo elements prior to the hover state as with each hover your asking the browser to re-draw the secret element causing a loss of performance overall, see the below link which is a simple demo i made showing that you can achieve the same result but simply hiding the elements until you hover over the parent.

    http://jsfiddle.net/chrisupjohn/yhRnh/

  6. #6
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was about to post another question because I wasn't sure how to apply the after/before on the same element I had the hover on. The problem with my code above is the hover was applied to the li which caused the bullets to appear when you weren't actually on the link but just the list item. I didn't know I was able to do a:hover:before

    Using your advice I am using the code below which seems to be working perfectly:

    Code:
    .nav a:before, .nav a:after {
    content:url(../images/nav_bullet.png);
    margin:0 7px;/* horizontal margin*/
    position:relative;
    top:-4px;
    display:none;
    }
    
    .nav a:hover:before,.nav a:hover:after{
        display:inline-block;
    }
    Definitely appreciate the tip, I didn't know that the element had to be redrawn each time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •