SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Make Current Tab Highlighted

    I have a simple top menu with drop-down sub-menus.

    The *current* tab should be a darker color to signify that it is currently selected.

    Had this working, but it looks like I broke Rayzur's code on this point after 1,000 iterations?!

    I am able to get the current tab shaded, but as you hover over or select another tab it needs to go back to a lighter color and it won't...

    Here is my code...

    Code CSS:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
    	<title>Top Menu Demo</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<style type="text/css">
     
    		/* ----- MAIN MENU ----- */
    		#topMenu{
    			width: 1200px;														/* Same size as Max-width on #wrapper. */
    			min-height: 0;														/* haslayout IE7 for float containment. */
    			margin: 0;
    			padding: 0;
    			list-style: none;
    			background: #E6E6FF;											/* Blue Gray (lighter) */
    			border-left: 1px solid #4682B4;						/* Steel Blue (darker) */ /* NEW */
    			border-bottom: 1px solid #4682B4;					/* Steel Blue (darker) */ /* NEW */
    		}
     
    		/* Still do not understand this! */
    		#topMenu:after {														/* Contain floats without overflow. */
    			content: "";
    			clear: both;
    			display: block;
    			height: 0;
    			font-size: 0;
    		}
     
    		#topMenu li{
    			position: relative;												/* Set containing block for Submenu. */
    			float: left;
    		/*	width: 110px;															/* Remove this if "Fluid" Top Menu is desired. */
    			padding: 0 1em;														/* Tweak?? */
    			border-top: 1px solid #4682B4;						/* Steel Blue (darker) */ /* NEW */
    			border-right: 1px solid #4682B4;					/* Steel Blue (darker) */ /* NEW */
    		}
     
     
    		/* NEW */
    		#topMenu li.current,
    		#topMenu li:hover{
    			background: #4682B4;											/* Steel Blue (darker) */
    		}
     
    		/* NEW */
    		#topMenu li.current a,
    		#topMenu li:hover a{
    			color: #FFF;
    		}
     
    		#topMenu a{
    			display: block;														/* Allows Text Centering. */
    			padding: 0.5em 0;
    			text-align: center;
    			text-decoration: none;
    			text-transform: uppercase;
    			color: #4682B4;														/* Steel Blue (darker) */
    			font-weight: bold;
    		}
     
     
    		/* ----- SUB-MENU ----- */
    		#topMenu li ul{
    			position: absolute;
    			left: 0;
    			top: 100%;																/* ??? */
    			margin-top: -999em;												/* Hide Submenu */
    			padding: 0;
    			list-style: none;
    			background: #E6E6FF;											/* Blue Gray (lighter) */
    		}
     
    		#topMenu li:hover ul{
    			margin-top: 0;														/* Unhide Submenu. */
    		}
     
    		#topMenu li ul li{
    			float: none;															/* Set up Hover Styling. */
    			display: block;
    			width: auto;															/* Increase Sub-Menu Width to fit Text. */
    			min-width: 110px;													/* Make same as (or greater than) #topMenu li. */
    			padding: 0 1em;														
    			border: 0px solid #4682B4;								/* Over-ride Parent Border. */ /* NEW */
    		}
     
    		#topMenu li ul li a{
    			text-transform: none;
    			white-space: nowrap;											/* Prevent Sub-Menu Text from Wrapping! */
    			text-align: left;													/* NEW */
    		}
     
    		#topMenu li ul li:hover{
    			float: none;
    			display: block;
    			background: #4682B4;											/* Steel Blue (darker) */
    		}
     
    		#topMenu li:hover ul li a{
    			color: #4682B4;														/* Steel Blue (darker) */
    		}
     
    		#topMenu li ul li:hover a{
    			float: none;
    			display: block;
    			color: #FFF;
    			font-weight: 700;
    		}
    	</style>
    </head>
     
    <body>
    	<div id="wrapper" class="clearfix">
    		<div id="inner">
    			<div id="header">
    				<h1>ACME, Inc.</h1>
    				<p>You are currently on the "News" page...</p>
    				<ul id="topMenu">
    					<li class="current"><a href="#">News</a>
    						<ul>
    							<li><a href="#">Breaking</a></li>
    							<li><a href="#">Local</a></li>
    							<li><a href="#">U.S.</a></li>
    							<li><a href="#">World</a></li>
    						</ul>
    					</li>
    					<li><a href="#">Politics</a>
    						<ul>
    							<li><a href="#">Local</a></li>
    							<li><a href="#">White House</a></li>
    							<li><a href="#">Congress</a></li>
    							<li><a href="#">Govt</a></li>
    							<li><a href="#">Elections</a></li>
    						 </ul>
    					</li>
    					<li><a href="#">Business</a>
    						<ul>
    							<li><a href="#">Economy</a></li>
    							<li><a href="#">Markets</a></li>
    							<li><a href="#">Investing</a></li>
    							<li><a href="#">Small Biz</a></li>
    							<li><a href="#">Jobs</a></li>
    							<li><a href="#">Real Estate</a></li>
    						 </ul>
    					</li>
    					<li><a href="#">Sports</a>
    						<ul>
    							<li><a href="#">NBA</a></li>
    							<li><a href="#">MLB</a></li>
    							<li><a href="#">NFL</a></li>
    							<li><a href="#">NHL</a></li>
    							<li><a href="#">NCAAF</a></li>
    							<li><a href="#">Golf</a></li>
    						</ul>
    					</li>
    					<li><a href="#">Travel</a>
    						<ul>
    							<li><a href="#">U.S.</a></li>
    							<li><a href="#">S. America</a></li>
    							<li><a href="#">Europe</a></li>
    							<li><a href="#">Africa</a></li>
    							<li><a href="#">Asia</a></li>
    							<li><a href="#">Australia</a></li>
    							<li><a href="#">Tips</a></li>
    						</ul>
    					</li>
    					<li><a href="#">Weather</a>
    						<ul>
    							<li><a href="#">Current</a></li>
    							<li><a href="#">Forecast</a></li>
    							<li><a href="#">U.S.</a></li>
    							<li><a href="#">News</a></li>
    							<li><a href="#">Records</a></li>
    						</ul>
    					</li>
    					<li><a href="#">Opinion</a>
    						<ul>
    							<li><a href="#">Debbie D.</a></li>
    							<li><a href="#">Frank S.</a></li>
    							<li><a href="#">Suzy Q.</a></li>
    							<li><a href="#">Jane D.</a></li>
    							<li><a href="#">Staff</a></li>
    							<li><a href="#">Reader Comments</a></li>
    						</ul>
    					</li>
    				</ul><!-- End of #TOPMENU -->
    			</div><!-- End of #HEADER -->
     
    		</div><!-- End of #INNER -->
    	</div><!-- End of #WRAPPER -->
     
    </body>
     
    </html>

    Thanks,



    Debbie

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Possibly a clumsy solution...but.

    .topMenu li.current, .topMenu li.current:hover, .topMenu li:hover{background:darker color}
    .topMenu li , .topMenu:hover .current{background:lighter color}

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As Dresden said you would need to turn the current tab off when the main menu is hovered but is a little clumsy because you then have to follow all the way through.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Top Menu Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /* ----- MAIN MENU ----- */
            #topMenu {
        width: 1200px;                            /* Same size as Max-width on #wrapper. */
        min-height: 0;                            /* haslayout IE7 for float containment. */
        margin: 0;
        padding: 0;
        list-style: none;
        background: #E6E6FF;                                            /* Blue Gray (lighter) */
        border-left: 1px solid #4682B4;      /* Steel Blue (darker) */ /* NEW */
        border-bottom: 1px solid #4682B4;               /* Steel Blue (darker) */ /* NEW */
    }
    /* Still do not understand this! */
            #topMenu:after {                                                        /* Contain floats without overflow. */
        content: "";
        clear: both;
        display: block;
        height: 0;
        font-size: 0;
    }
    #topMenu li {
        position: relative;            /* Set containing block for Submenu. */
        float: left;
        /*  width: 110px;               /* Remove this if "Fluid" Top Menu is desired. */
                padding: 0 1em;              /* Tweak?? */
        border-top: 1px solid #4682B4;            /* Steel Blue (darker) */ /* NEW */
        border-right: 1px solid #4682B4;                    /* Steel Blue (darker) */ /* NEW */
    }
    /* NEW */
            #topMenu li.current, #topMenu li:hover {
        background: #4682B4;                                            /* Steel Blue (darker) */
    }
    /* NEW */
            #topMenu li.current a, #topMenu li:hover a {
        color: #FFF;
    }
    #topMenu a {
        display: block;              /* Allows Text Centering. */
        padding: 0.5em 0;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: #4682B4;              /* Steel Blue (darker) */
        font-weight: bold;
    }
    /* ----- SUB-MENU ----- */
    #topMenu li ul {
        position: absolute;
        left: 0;
        top: 100%;                                /* ??? */
        margin-top: -999em;            /* Hide Submenu */
        padding: 0;
        list-style: none;
        background: #E6E6FF;                                            /* Blue Gray (lighter) */
    }
    #topMenu li:hover ul {
        margin-top: 0;                            /* Unhide Submenu. */
    }
    #topMenu li ul li {
        float: none;                                                            /* Set up Hover Styling. */
        display: block;
        width: auto;                                                            /* Increase Sub-Menu Width to fit Text. */
        min-width: 110px;                                       /* Make same as (or greater than) #topMenu li. */
        padding: 0 1em;
        border: 0px solid #4682B4;                /* Over-ride Parent Border. */ /* NEW */
    }
    #topMenu li ul li a {
        text-transform: none;
        white-space: nowrap;                                            /* Prevent Sub-Menu Text from Wrapping! */
        text-align: left;                                       /* NEW */
    }
    #topMenu li.current, #topMenu li.current:hover, #topMenu li:hover {
        background: #4682B4;
    }
    #topMenu li, #topMenu:hover .current {
        background:#E6E6FF;
    }
    #topMenu:hover .current a {
        color:#4682B4
    }
    #topMenu li.current:hover a {
        color:#fff
    }
    #topMenu li ul li:hover {
        float: none;
        display: block;
        background: #4682B4;                                            /* Steel Blue (darker) */
    }
    #topMenu li:hover ul li a, #topMenu li.current:hover ul li a {
        color: #4682B4;              /* Steel Blue (darker) */
    }
    #topMenu li ul li:hover a, #topMenu li.current ul li:hover a {
        float: none;
        display: block;
        color: #FFF;
        font-weight: 700;
    }
    
    /*
    */
    </style>
    </head>
    <body>
    <div id="wrapper" class="clearfix">
        <div id="inner">
            <div id="header">
                <h1>ACME, Inc.</h1>
                <p>You are currently on the "News" page...</p>
                <ul id="topMenu">
                    <li class="current"><a href="#">News</a>
                        <ul>
                            <li><a href="#">Breaking</a></li>
                            <li><a href="#">Local</a></li>
                            <li><a href="#">U.S.</a></li>
                            <li><a href="#">World</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Politics</a>
                        <ul>
                            <li><a href="#">Local</a></li>
                            <li><a href="#">White House</a></li>
                            <li><a href="#">Congress</a></li>
                            <li><a href="#">Govt</a></li>
                            <li><a href="#">Elections</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Business</a>
                        <ul>
                            <li><a href="#">Economy</a></li>
                            <li><a href="#">Markets</a></li>
                            <li><a href="#">Investing</a></li>
                            <li><a href="#">Small Biz</a></li>
                            <li><a href="#">Jobs</a></li>
                            <li><a href="#">Real Estate</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Sports</a>
                        <ul>
                            <li><a href="#">NBA</a></li>
                            <li><a href="#">MLB</a></li>
                            <li><a href="#">NFL</a></li>
                            <li><a href="#">NHL</a></li>
                            <li><a href="#">NCAAF</a></li>
                            <li><a href="#">Golf</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Travel</a>
                        <ul>
                            <li><a href="#">U.S.</a></li>
                            <li><a href="#">S. America</a></li>
                            <li><a href="#">Europe</a></li>
                            <li><a href="#">Africa</a></li>
                            <li><a href="#">Asia</a></li>
                            <li><a href="#">Australia</a></li>
                            <li><a href="#">Tips</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Weather</a>
                        <ul>
                            <li><a href="#">Current</a></li>
                            <li><a href="#">Forecast</a></li>
                            <li><a href="#">U.S.</a></li>
                            <li><a href="#">News</a></li>
                            <li><a href="#">Records</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Opinion</a>
                        <ul>
                            <li><a href="#">Debbie D.</a></li>
                            <li><a href="#">Frank S.</a></li>
                            <li><a href="#">Suzy Q.</a></li>
                            <li><a href="#">Jane D.</a></li>
                            <li><a href="#">Staff</a></li>
                            <li><a href="#">Reader Comments</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- End of #TOPMENU -->
            </div>
            <!-- End of #HEADER -->
        </div>
        <!-- End of #INNER -->
    </div>
    <!-- End of #WRAPPER -->
    </body>
    </html>
    That works but I've probably missed an easier way somewhere along the line

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Dresden said you would need to turn the current tab off when the main menu is hovered but is a little clumsy because you then have to follow all the way through.


    That works but I've probably missed an easier way somewhere along the line
    I'm looking over your code now.

    From a UI standpoint, is what I'm wanting okay??


    Here is the same effect, but on a different type of menu, from Rayzur...

    (It works, but I couldn't figure out what his code has that my lacks, so I gave up and posted here last night!!)

    Code CSS:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>Dropline Sublist with Current Page Highlighting</title>
    	<style type="text/css">
    		body {
    				font: 100%/1.3 arial, helvetica, sans-serif;
    		}
    		h1 {
    				margin: 10px 0;
    				font-size: 1.5em;
    				text-align: center;
    		}
    		h1 small {display: block;}
     
     
    		/*=== Begin Nav Styles ===*/
    		#nav {
    				position: relative;
    				width: 630px;
    				margin: 0px auto;
    				padding: 0;
    				list-style: none;
    				background: #E6E6FF;										/* Blue Gray (lighter) */
    				border-bottom: 34px solid #4682B4;			/* Space for Dropline ---> Steel Blue (darker) */
    		}
     
    		#nav:after {																/* Contain floats without overflow */
    				content: "";
    				clear: both;
    				display: block;
    				height: 0;
    				font-size: 0;
    		}
     
    		#nav li {
    				float: left;
    		}
     
    		#nav li a {
    				float: left;
    				width: 90px;
    				padding: 9px 0;													/* Center text vertically.
    																										Padding + Line-Height + Padding = Dropline Height
    																										9px + 16px + 9px = 34px */
    				font: bold 14px/16px arial, helvetica, sans-serif;		/* New */
    				color: #4682B4;													/* Steel Blue (darker) */
    				text-decoration: none;
    				text-transform: uppercase;
    				text-align: center;
    		}
     
    		/* Make 1st tab and/or tab being hovered darker blue. */
    		#nav .current a,
    		#nav li:hover a {
    				color: #FFF;														/* White */
    				background: #4682B4;										/* Steel Blue (darker) */
    		}
     
     
    		/*--- Begin Dropline Styles ---*/
    		#nav li ul {
    				position: absolute;
    				left: 0;
    				top: 100%;
    				width: 630px;
    				margin: 0 0 0 -999em;
    				padding: 0;															/* NEW */
    				list-style: none;
    				background: #4682B4;										/* Steel Blue (darker) */
    		}
     
    		#nav .current ul {
    				margin: 0;															/* Unhide sublist for Current page */
    				padding: 0;															/* NEW */
    		}
     
    		#nav li:hover ul {
    				margin: 0;															/* Unhide sublist for All Tabs on hover */
    				z-index: 10;														/* Stack the hovered sublist above
    																										the current page sublist */
    		}
     
    		#nav:hover .current a {											/* Hide sublist for Current page
    																										when hovering on other Tab items */
    				color: #4682B4;													/* Steel Blue (darker) */
    				background: #E6E6FF;										/* Blue Gray (lighter) */
    		}
     
    		#nav:hover .current:hover a {								/* Keep initial Current page settings */
    				color: #FFF;														/* White */
    				background: #4682B4;										/* Steel Blue (darker) */
    		}
     
    		#nav li li a {
    				width: auto;														/* Adjust submenu for longer list items */
    				min-width: 90px;
    				text-transform: none;
    		}
     
    		#nav li li a:hover {												/* Target the sublist anchors with any style on hover */
    				text-decoration: underline;
    		}
    	</style>
    </head>
    <body>
    	<h1>Dropline Sublist<small> with Initial Current Page Highlighting </small></h1>
    	<ul id="nav">
    		<li class="current"><a href="#">News</a>
    			<ul>
    				<li><a href="#">Breaking</a></li>
    				<li><a href="#">Local</a></li>
    				<li><a href="#">U.S.</a></li>
    				<li><a href="#">World</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Politics</a>
    			<ul>
    				<li><a href="#">Local</a></li>
    				<li><a href="#">White House</a></li>
    				<li><a href="#">Congress</a></li>
    				<li><a href="#">Govt</a></li>
    				<li><a href="#">Elections</a></li>
    			 </ul>
    			</li>
    		<li><a href="#">Business</a>
    			<ul>
    				<li><a href="#">Economy</a></li>
    				<li><a href="#">Markets</a></li>
    				<li><a href="#">Investing</a></li>
    				<li><a href="#">Smal Biz</a></li>
    				<li><a href="#">Jobs</a></li>
    				<li><a href="#">Real Estate</a></li>
    			 </ul>
    		</li>
    		<li><a href="#">Sports</a>
    			<ul>
    				<li><a href="#">NBA</a></li>
    				<li><a href="#">MLB</a></li>
    				<li><a href="#">NFL</a></li>
    				<li><a href="#">NHL</a></li>
    				<li><a href="#">NCAAF</a></li>
    				<li><a href="#">Golf</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Travel</a>
    			<ul>
    				<li><a href="#">U.S.</a></li>
    				<li><a href="#">S. America</a></li>
    				<li><a href="#">Europe</a></li>
    				<li><a href="#">Africa</a></li>
    				<li><a href="#">Asia</a></li>
    				<li><a href="#">Australia</a></li>
    				<li><a href="#">Tips</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Weather</a>
    			<ul>
    				<li><a href="#">Current</a></li>
    				<li><a href="#">Forecast</a></li>
    				<li><a href="#">U.S.</a></li>
    				<li><a href="#">News</a></li>
    				<li><a href="#">Records</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Opinion</a>
    			<ul>
    				<li><a href="#">Debbie D.</a></li>
    				<li><a href="#">Frank S.</a></li>
    				<li><a href="#">Suzie Q.</a></li>
    				<li><a href="#">Jane D.</a></li>
    				<li><a href="#">Staff</a></li>
    				<li><a href="#">Reader Comments</a></li>
    			</ul>
    		</li>
    	</ul>
    </body>
    </html>



    Debbie

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

    Rays example usually roughly the same method and the key line is this:

    Code:
    #nav:hover
    The change is made when hovering on the ul and not the list as per all the other rules.

    In the code I gave that would be this element:
    Code:
    #topMenu:hover etc....
    However the dropdown is more complicated than the dropline because it has colour changes on the nested lists to contend with and control unlike the dropline version which is simpler.
    Last edited by Paul O'B; Apr 22, 2011 at 02:14.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I like the way you code fix looks and works.

    But back to my question...

    How does everyone else think it looks and works from a UI standpoint??

    Is making the current tab darker too much formatting or distracting?

    I like it so people know where they are at.

    Thanks,



    Debbie


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
  •