Navbar help!!

Discussion in 'CSS' started by lasti, Jul 20, 2012.

  1. #1
    Has any one come across a navbar like this??

    [​IMG]

    If not, can any one guide me to create a similar one..

    Thanks much.
     
    lasti, Jul 20, 2012 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    The curved shadown may require a bit of trickery, but the rest of it is remarkably simple... though a simple picture still leaves a LOT of questions.
    
    <ul id="mainMenu">
    	<li><a href="#">Paasivu</a></li>
    	<li><a href="#" class="current">Foorumi</a></li>
    	<li><a href="#">Blogit</a></li>
    	<li><a href="#">Mita Uutta?</a></li>
    </ul>
    
    Code (markup):
    
    #mainMenu {
    	list-style:none;
    	/* you may want to state a width here, maybe not -- depends on layout */
    	background:#FFF;
    	-webkit-border-radius:8px;
    	-moz-border-radius:8px;
    	border-radius:8px;
    }
    
    #mainMenu li {
    	display:inline; 
    	/* 
    		don't even TRY to do more with these unless
    		you add dropdowns
    	*/
    }
    
    #mainMenu a {
    	display:inline-block; /* so they obey top/bottom padding */
    	padding:0.5em;
    	vertical-align:top; /* fix IE oddities */
    	text-decoration:none;
    	font-weight:bold;
    	color:#000;
    }
    
    #mainMenu .current a {
    	color:#4C0;
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	color:#000;
    	background:#FDB;
    }
    
    Code (markup):
    Guessing a bit on the colors, and the positioning/border-radius may need to be tweaked, but this is the general idea.
     
    deathshadow, Jul 20, 2012 IP
  3. lasti

    lasti Active Member

    Messages:
    162
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    90
    #3
    Thanks for your help, i am going to tweak your idea a bit!
     
    lasti, Jul 20, 2012 IP