SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,005
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation list with bullet and background color change (updated)

    Hello all,

    In order to properly place a bullet image on each navigation li element we normally use the background property to place it.

    If however, we wish to, also, add a on hover background color change to the list, we should set our anchors inside li to have "display:block;"

    Problem: Once we add "display:block" to our element and we set a background color, our bullet will vanish.

    What is the best way to have a menu that will: Change the background color when the user overs it, but that doesn't also loose the bullet ?

    Please take into consideration the following example of the intended result:
    http://jsfiddle.net/4PUFa/1/

    k. regards

  2. #2
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1/ CSS:

    <style type="text/css">
    <!--
    .ulcss {
    display:block;
    }
    .ulcss li{
    background: url(images/arrow.png) left no-repeat;
    padding-left:20px;
    list-style:none;
    }

    .ulcss li a:hover{
    background: url(images/nav1.png);

    }
    -->
    </style>
    2/ html
    <ul class="ulcss">
    <ul>
    <li><a href="http://lezonspa.com">Pedi Spa</a></li>
    <li><a href="http://www.lcdeco.com/">Pedicure Spas</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
    <li><a href="#">item5</a></li>
    </ul>
    </ul>
    I have applied this code to lezonspa.com

    Good luck

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,005
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lezonspa and all

    Update:
    I found another request, and I'm really sorry for not being able to say that earlier:
    We also need to change the text color.

    Please note that it seems that we cannot use a:hover because if we move our mouse near the padding area, we will have the text color with the wrong background color.
    Please have a look: http://jsfiddle.net/4PUFa/5/


    Thanks a lot

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Hopefully I understood your quandary correctly.


    It's really a simple trick based on manipulating the margins and padding of the UL and LI , and LI A elements .

    I explain the math, roughly in the following example. I used the default text bullet and px as my units; normally I wouldn't use px with default text but I wanted to make the math as transparent as possible for this example.

    If you are using list-style-image i would stick with px and figure the width of the image into the calculations, else I would recommend using ems



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    .nav, .nav li {padding:0; margin:0} /*resetting defaults, you may have done this for yur general css alread*/
    .nav{
    				width: 250px; 
    				padding-left:20px; /*this value + .nav li {margin-left } = .nav li a{ margin-left} x -1*/
    				border:1px solid #000;
    }
    .nav li{margin-left:10px; /*helps put bullest within the UL  block*/}
    .nav li  a {display:block;
    			padding:10px;
    			padding-left:30px;/* use this and following rule to contol distance of bullet from text */
    			margin-left:-30px;/* use this to contol distance of bullet from text*/
    }
    .nav li:hover, .nav li:hover a  {color:red; background: pink}
    		</style>
    	</head>
    	<body>
    <ul class="nav">
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
    	<li><a href="#">item longer sample item</a></li>
    	<li><a href="#">item</a></li>
    </ul>
    	</body>
    </html>
    hope this helps

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,005
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot.

    I end up with something like:

    http://jsfiddle.net/Cq5JY/

    Quote Originally Posted by oikram View Post
    Please note that it seems that we cannot use a:hover because if we move our mouse near the padding area, we will have the text color with the wrong background color.
    Please have a look: http://jsfiddle.net/4PUFa/5/
    Actually the issue was border related and NOT padding related.

    Solved.


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
  •