View Full Version : Need Code For Nav Bar
ShiftKnowledge
04-17-2011, 05:41 AM
Can somebody hit up this site and grab the html and needed CSS from this site? The stylesheet is going to be external. I will make changes to it later.
http://forum.surfermag.com/forum/postlist.php?Cat=0&Board=UBB1&page=0
Thanks
I also need to learn how to make it sit in the center of the page without stretching or changing size as well.
mlegg
04-17-2011, 04:05 PM
You should get Firefox and the Web Developer Toolbar (https://addons.mozilla.org/en-us/firefox/addon/web-developer/) extension. It allows you to see the HTML, CSS, and all variables for the website you are viewing.
CSS=
.nav {
background:#8f8e8e none;
clear:both;
float:left;
height:30px;
margin:10px 0 10px;
width:950px;
}
.nav .menu-wrapper {
float:left;
width:810px;
}
.nav ul li {
display:inline;
}
.nav ul li a:link,
.nav ul li a:visited {
color:#fff;
font-family:arial, sans-serif;
font-size:14px;
float:left;
height:30px;
line-height:30px;
padding:0 17px;
text-transform:uppercase;
}
.nav ul li a:hover,
.nav ul li.on a,
.nav ul li.current_page_item a {
background:#989898 none;
text-decoration:none;
}
.nav ul li.on a:hover {
text-decoration:none;
}
.nav ul li.properties {
float:left;
position:relative;
}
.nav ul.sub-menu {
background:#989898 none;
border-bottom:1px solid #c1c1c1;
display:none;
position:absolute;
left:0;
top:30px;
z-index:100;
}
.nav ul li.on ul.sub-menu {
display:block;
}
.nav ul.sub-menu li {
float:left;
border-bottom:1px solid #b1b1b1;
width:202px;
}
.nav ul.sub-menu li a {
font-size:11px;
}
.nav ul.sub-menu li a:hover {
text-decoration:underline;
}
HTML=
<div class="nav">
<div class="menu-wrapper">
<ul id="menu-home-navigation" class="menu">
<li><a href="http://www.surfermag.com/">Home</a></li>
<li><a title="Features" href="http://www.surfermag.com/features/">Features</a></li>
<li><a href="http://www.surfermag.com/videos/">Videos</a></li>
<li><a href="http://www.surfermag.com/photos/">Photos</a></li>
<li><a href="http://forum.surfermag.com/forum/ubbthreads.php">Forum</a></li>
<li><a href="http://www.surfermag.com/magazine/">Magazine</a></li>
<li><a href="http://www.surfermag.com/surf-reports-and-forecasts/">Forecasts</a></li>
<li class="properties" onmouseover="this.className='properties on';" onmouseout="this.className='properties';"><a href="#">Properties</a>
<ul class="sub-menu">
<li><a href="http://fantasysurfer.com" target="_blank">Fantasy Surfer</a></li>
<li><a href="http://surferhot100.com" target="_blank">Surfer Hot 100</a></li>
<li><a href="http://surferpoll.com" target="_blank">Surfer Poll</a></li>
<li><a href="http://vod.surfermag.com/" target="_blank">Video On Demand</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu-icons">
<a href="http://www.facebook.com/surfermag"><img src="http://www.surfermag.com/wp-content/themes/surfermag.com/images/facebook_icon.gif"></a>
<a href="http://twitter.com/SURFER_Magazine"><img src="http://www.surfermag.com/wp-content/themes/surfermag.com/images/twitter_icon.gif"></a>
<a href="http://www.youtube.com/user/surfer"><img src="http://www.surfermag.com/wp-content/themes/surfermag.com/images/youtube_icon.gif"></a>
<a href="http://www.surfermag.com/feed/"><img src="http://www.surfermag.com/wp-content/themes/surfermag.com/images/rss_icon.gif"></a>
</div>
ShiftKnowledge
04-17-2011, 05:35 PM
Thanks man much appreciated!!!! That kicks Azzzzz!!!!
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.