#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    20
    Rep Power
    0

    Improve navigation menu (hover image)


    Hello,

    I am thinking about 1 problem with improving menu by images. On pic under you can see menu what is now and menu what i need to do.



    1) I need to add this image for a.active item. I can do it with jQuery, but is there chance to do it just with CSS?

    2) I need to add this image between all items in menu, I think about some profi and smart solution. I wanted to use it as border image for every a item, but it's not supported by IE.

    I have this HTML code (part):
    HTML Code:
     
    <div id="menu">
        <ul>
          <li><a href="" title="">Domů</a></li>
          <li><a href="" title="">Velkoobchod</a></li>
          <li><a href="" title="">Něco o materiálech</a></li>
          <li><a href="" title="">Informace</a></li>
          <li><a href="" title="">Chci nakupovat levněji</a></li>
          <li><a href="" title="">Obchodní podmínky</a></li>
          <li><a href="" title="">Tabulky velikostí županů</a></li>
          <li><a href="" title="">Partneři</a></li>
          <li><a href="" title="">Kontakty</a></li> 
        </ul>
       </div>


    And CSS:
    CSS Code:
     
    #menu {
      height: 42px;
      font: bold 12px Arial;
      background: url('img/pozadi-menu.png') repeat-x;
    }
     
    #menu ul li {
      display: inline;
      list-style-image: url('img/predel-menu.png');
    }
     
    #menu ul li a {
      color: rgb(255,255,255);
      position: relative;
      top: 13px;
      margin-left: 10px;
      margin-right: 10px;
    }
     
    #menu ul li a:hover {
      color: rgb(255,255,255);
    }


    Thanks for help.
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    this should be possible.

    If you use an image sprite you can have an active/hover + non-active state on there. An image sprite contains "more" images So also an image with that white arrow on it.

    On hover you change the background position. If you need help let me know. Always make sure the hover state is above the active one to prevent flickering.
  4. #3
  5. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    I had nothing to do so give this a try:

    css
    Code:
    html,body{margin:0;padding:0;}
    body{background:pink;}
    #menu {
        height: 42px;
        font: bold 12px Arial;  
    }
    #menu ul li {
        display: inline;
    }
    #menu ul li a {
        color: rgb(255,255,255);
        padding: 5px 10px;
        display:inline-block;
        background: url('../images/menu-button.png') no-repeat 0 -30px;
        text-decoration: none; /* Lets get rid of this default crap */
    }
    #menu ul li a:hover, #menu ul li a.active {/* notice not a pseudo, but active class */
        background-position: 50% 0; /* notice the 50 percent that centers the arrow */
    }
    Html
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" >
        <head><meta charset="UTF-8" />
            <link rel="stylesheet" type="text/css" href="css/style.css"/>
            
            <meta http-equiv="Content-language" content="nl" />
            <title></title>
        </head>
        <body>
            <div id="menu">
                <ul>
                    <li><a href="" title="" class="active">Domů</a></li><!-- notice this active class -->
                    <li><a href="" title="">Velkoobchod</a></li>
                    <li><a href="" title="">Něco o materiálech</a></li>
                    <li><a href="" title="">Informace</a></li>
                    <li><a href="" title="">Chci nakupovat levněji</a></li>
                    <li><a href="" title="">Obchodní podmínky</a></li>
                    <li><a href="" title="">Tabulky velikostí županů</a></li>
                    <li><a href="" title="">Partneři</a></li>
                    <li><a href="" title="">Kontakty</a></li>
                </ul>
            </div>
        </body>
    </html>
    Image added here:


    It will take some time to see how the background position works but its quite easy. you start at 0,0 if you move 10 px to the right. its -10px, 0. down its 0, -10px.

    Using this sprite technique can speed up your website quite a bunch because it can drastically limit the amount of header requests that are sent for each separate image.

    P.s. you dont need an extra div around that <ul>, Its already a block element.

    _edit: added an active class in your markup
    Last edited by aeternus; October 1st, 2012 at 09:11 AM.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    20
    Rep Power
    0
    You are cool, thanks

    I didn't know that background-position

    And can you help me with the second problem? That white-red spacer between each item in menu is img. I can do it easily with border-image, but its not supported by IE. Some solution?
  8. #5
  9. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by MaxEisley
    You are cool, thanks

    I didn't know that background-position

    And can you help me with the second problem? That white-red spacer between each item in menu is img. I can do it easily with border-image, but its not supported by IE. Some solution?
    Thanks its always nice to hear I am cool

    As far as this problem of the spacer. does it only sit between the List items? If so you can give, a background image to all list-items. and give a class of last to the last list item to not show that image. Instead of display:inline, use float:left; for the li's this will allow the li to fit around the higher a-elements. Or more optimal, give the ul a background image, and all except for the last list item a padding-right of for instance 1 px.



    Just an extra tip. Don't start messing with position relative or absolute for this menu. It will make it unnecessary complex.
    Last edited by aeternus; October 1st, 2012 at 11:09 AM.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    20
    Rep Power
    0
    Problem is that when i use background-image as in previous example, it's not working at one time. There can't be 2 background images and for hover and active is shown spacer or arrow.

    Answer extra tip: Yes, but margin or padding didn't work, I needed to get menu text on middle and only position relative with top worked.
  12. #7
  13. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    I think you misunderstood me. I didn't mention to use 2 images.
    If you have an online example of this stuff I can have a look.
    My suggestion was to place an image in the background of a li, you can do exactly the same as done with the a-elements.

    Comments on this post

    • MaxEisley agrees
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    20
    Rep Power
    0
    Yes to li, I thought you mean to a. It will work, thanks for help man, really much.

IMN logo majestic logo threadwatch logo seochat tools logo