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

    Join Date
    Jul 2006
    Posts
    12
    Rep Power
    0

    Css sprite top image menu help (in Magento)


    Im struggling here trying to replace this code. any help would be appreciated. Now To go into details I have a magento template. Im trying to replace the default navigation text menu to a css sprite top image menu. the default navigation text menu css code is stated below


    /********** < Navigation */
    .nav-container {}
    #nav {padding:0; margin:0; font-size:11px; border-bottom:1px solid #000; }

    /* All Levels */
    #nav li { text-align:left; position:relative; border-right:1px solid #000;}
    #nav li a,
    #nav li a span{background:url(../images/menu_bg.gif) left top repeat-x #141314;}

    #nav li.first{background:url(../images/menu_corner_left.png) left top no-repeat; padding-left:5px;}
    #nav li.first a span{padding-left:42px;}
    #nav li.over.first,
    #nav li.active.first{background:url(../images/menu_corner_left_active.png) left top no-repeat;}

    #nav li.last a{background:url(../images/menu_corner_right.png) right top no-repeat; padding-right:5px;}
    #nav li.last a span{padding-right:38px; padding-left:45px;}
    #nav li.over.last a,
    #nav li.active.last a{background:url(../images/menu_corner_right_active.png) right top no-repeat;}

    #nav li.over a span,
    #nav li.active a span{background:url(../images/menu_bg_active.gif) left top repeat-x #1E1F1F; padding-bottom:16px;}
    #nav li.over,
    #nav li.active{border-bottom:1px solid #2C2B2C;}

    #nav li.over { z-index:999; }
    #nav li.parent {}
    #nav li a { display:block; text-decoration:none; }
    #nav li a:hover { text-decoration:none; }
    #nav li a span { display:block; padding:20px 43px 17px 47px; text-transform:uppercase; white-space:nowrap; cursorointer; }
    #nav li ul a span { white-space:normal; }

    /* 1st Level */
    #nav li { float:left; }
    #nav li a { float:left; padding:0; color:#FFF; }
    #nav li a:hover { color:#FFF; }
    #nav li.over a,
    #nav li.active a { color:#FFF; }

    /* 2nd Level */
    #nav ul { position:absolute; width:17em; top:50px; left:-10000px; border:1px solid #202020; border-bottom:0; background:#070707; font-size:9px; }
    #nav ul li { float:none; border-bottom:1px solid #202020!important; background:0; }
    #nav ul li.last { border-bottom:0; }
    #nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#888 !important; background:0!important; }
    #nav ul li a:hover { color:#FFF !important; }
    #nav ul li a span{padding:3px 5px!important; background:0!important;}
    #nav ul li.active > a,
    #nav ul li.over > a { color:#FFF !important; }

    /* 3rd+ leven */
    #nav ul ul { top:7px; }

    /* Show Menu */
    #nav li.over > ul { left:0; }
    #nav li.over > ul li.over > ul { left:100px; }
    #nav li.over ul ul { left:-10000px; }
    /********** Navigation > */

    Ok now after viewing the code above i was wondering how can i add the css sprite image code that i made to replace the default navigation text menu. Below is the css code i made for the sprite images.


    #navigation { margin: 0; padding: 0; width: 969px; height: 53px;
    Background-image: url(lastone.gif) ; }

    #navigation li { margin: 0; padding: 0; list-style-type: none; display: inline;
    height:53px; text-align: center; float:left; line-height:53px; }

    #navigation a { display:block; height:52px; }
    #navigation a:hover { background-image: url(lastone.gif) ; }

    #nav-home { width:161px; }
    #nav-home a:hover { background-position:bottom 0; }

    #nav-Service { width:161px; }
    #nav-Service a:hover { background-position:bottom -162px; }

    #nav-Quicklinkz { width:161px; }
    #nav-Quicklinkz a:hover { background-position:bottom -323px; }

    #nav-Advertise { width:161px; }
    #nav-Advertise a:hover { background-position:bottom -484px; }

    #nav-Contact { width:161px; }
    #nav-Contact a:hover { background-position:bottom -645px; }

    #nav-About { width:161px; }
    #nav-About a:hover { background-position:bottom -806px; }

    #navigation span { display: none; }

    AS you can see below i also have inserted the HTML that correspond to the css sprite image menu code. I link the css code into the html. so my final 2 questions is. can anyone replace the css code i made in the default css code. and after thats done which root do i upload the html code to.


    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Navigation Menu</title>
     
    <link rel="stylesheet" type="text/css" href="menu.css"/>
     
    </head>
     
     
    <body>
    <ul id="navigation">
     
      <li id="nav-home"><a href="#"><span>Home</span></a></li> 
      <li id="nav-Service"><a href="#"><span>Service</span></a></li>  
      <li id="nav-Quicklinkz"><a href="#"><span>Quicklinkz</span></a></li>
      <li id="nav-Advertise"><a href="#"><span>Advertise</span></a></li>  
      <li id="nav-Contact"><a href="#"><span>Contact</span></a></li>
      <li id="nav-About"><a href="#"><span>About</span></a></li>
    </ul>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    26
    Rep Power
    0
    Hi jace1319

    Are you looking at creating one big sprite or small ones for each item in the nav?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    12
    Rep Power
    0

    reply


    one big sprite image here is a sample <img src="http://www.magentocommerce.com/?ACT=25&fid=16&aid=19754_N6NQoiLnsFrtBUgdrEgf&thumb=1&board_id=1">
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    26
    Rep Power
    0
    What you will need to do is create a style that includes all the ids and assign the image to it. Like this

    #nav-home, #nav-Service, #nav-Quicklinkz, #nav-Advertise, #nav-Contact, #nav-About { background-image:url(image link here); background-repeat:no-repeat;}

    Let me know how you get on.

IMN logo majestic logo threadwatch logo seochat tools logo