PDA

View Full Version : Top fixed CSS3 navigation bar v.1



css-mfc-pro
07-01-2013, 08:41 PM
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 (http://www.design-xpro.com/etutoriale/topnav/1top.html) | Demo 2 (http://www.design-xpro.com/etutoriale/topnav/4/4.html)

http://www.design-xpro.com/etutoriale/topnav/top_html_sticky_navbar_myfreecams_code.jpg


CSS for hover effect
- paste css code between <head> and </head> tags


<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


<!--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