Results 1 to 1 of 1

Thread: Top fixed CSS3 navigation bar v.1

  1. #1
    Join Date
    Jul 2013
    Location
    Romania
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Top fixed CSS3 navigation bar v.1

    Top sticky horizontal navigation bar with custom buttons and CSS3 hover effects
    Created for one of my personal projects this custom top horizontal navigation bar sticks to the top margin of your browser, even if you scroll down to the footer section of the webpage, the nav-bar will be visible.
    Uses custom CSS3 hover effects animating the buttons (transition effect, shadow effect, opacity and more)

    Preview demos:
    Online Demo 1 | Demo 2




    CSS for hover effect
    - paste css code between <head> and </head> tags
    Code:
    <style type="text/css">
    /**START copy CSS ***/
    #nv a{
    	padding:11px 11px 5px 9px;
    	display:inline-block;
    	float:inherit;
    	position:relative;
    	text-transform:uppercase;
    	border-left:0px solid #aaaaaa;
    	border-right:0px solid #aaaaaa;
    	color:#F00;
    	-webkit-transition:all .5s;
    	-moz-transition:all .5s;transition:all .5s;
    	-ms-transition:all .5s;
    	-o-transition:all .5s;
    	text-shadow:0 2px 1px #000;
    	text-decoration:none;
    	font-size:15px;
    	left:7px;
    	}
    #nv a:hover{
    	color: #FFF;
    	border:1px solid rgba(255,255,255,0.5);
    	padding:11px 11px 11px 11px;
    	background: rgba(0,0,0,0.5);
    	-webkit-box-shadow:inset 0px 10px 10px 0px #000;
    	-moz-box-shadow:inset 0px 5px 5px 0px #000;
    	box-shadow:inset 0px 5px 5px 0px #000;
    	text-shadow:-4px 8px 9px #000;
    	font-size:15px; 
    	position: relative;
    -moz-box-shadow: 0 18px 10px -9px rgba(255,255,255,0.7);
    -webkit-box-shadow: 0 18px 10px -9px rgba(255,255,255,0.7);
    box-shadow: 0 18px 10px -9px rgba(255,255,255,0.7);
    -o-box-shadow: 0 18px 10px -9px rgba(255,255,255,0.7);
    -ms-box-shadow: 0 18px 10px -9px rgba(255,255,255,.7);}
    /**END copy CSS ***/
    </style>
    HTML code:
    - paste the html code after <body> tag
    Code:
    <!--Start copy HTML-->
    <div style='position:fixed;top:0px;left:0px;padding-left:20px;display:block;width:100%;height:80px;z-index:9999;background:url(1/susbl.png) repeat-x'>
      <div style='width:960px;height:80px;position:relative;display:block;margin:auto !important;z-index:9999'>
                                <img src='1/hdr2.png' style='position:absolute;top:0px;left:-82px;'>
                                    <div id='nv' style='height:50px;display:block;position:relative;float:right;margin-top:11px;margin-left:100px;font-weight:normal;margin-right:160px;border-left:1px solid #900;border-right:1px solid #900;'>
                                        <a href='#'>ABOUT ME</a>
                                        <a href='#'>GALLERIES</a>
                                        <a href='#'>VIDEOS</a>
                                        <a href='#'>ITEMS FOR SALE</a>
                                        <a href='#'>WISHLISTS</a>
                                        <a href='#'>TOP TIPPERS</a>
                                    </div>
                                </div>    
    </div>
    <!--END  copy HTML-->
    Digital pack includes browser-based preview, html.txt file containing HTML code and css.txt file containing css style-sheet (images included)
    Concept and design by css-mfc-pro
    Attached Files Attached Files
    • File Type: zip 1.zip (60.5 KB, 187 views)

Similar Threads

  1. Replies: 3
    Last Post: 01-21-2011, 12:11 PM
  2. fixed CSS navigation
    By hkysk8r86 in forum CSS
    Replies: 5
    Last Post: 11-24-2009, 07:20 PM
  3. Replies: 0
    Last Post: 01-21-2008, 12:46 AM
  4. Replies: 2
    Last Post: 01-08-2008, 01:12 AM
  5. Replies: 1
    Last Post: 02-18-2007, 08:15 AM

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
  •