Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Jun 2008
    Posts
    1
    Member #
    16925
    Hello, I'm trying to mimick Threadless.com nav bar. there are four images when you scroll over each image a sub menu pops up below. Each sub menu is in the same area, how are they doing this? where can i find the code?
    Thanks!

  2.  

  3. #2
    Member
    Join Date
    Jul 2008
    Posts
    32
    Member #
    17036
    right click, view source is your friend.

    Code:
    <body><div id="preloadedImages"></div>	<!-- logo -->				<div id="nav_logo"><a href="http://www.threadless.com/"><img id="img_nav_logo" src="http://media.threadless.com/imgs/prints_sale_logo.gif" alt="Threadless T-Shirts" width="199" height="112"/></a></div>				<!-- nav -->	<div id="nav_shop">		<a href="http://www.threadless.com/catalog" onmouseover="showsubnav('shop')"><img id="img_nav_shop" src="http://media.threadless.com/imgs/nav2/nav_shop_r.gif" alt="Shop the catalog" width="75" height="40"/></a>	</div>	<div id="nav_participate">		<a href="http://www.threadless.com/submissions" onmouseover="showsubnav('participate')"><img id="img_nav_participate" src="http://media.threadless.com/imgs/nav2/nav_participate.gif" alt="Submit and score designs" width="151" height="40"/></a>	</div>	<div id="nav_info">		<a href="http://www.threadless.com/news" onmouseover="showsubnav('info')"><img id="img_nav_info" src="http://media.threadless.com/imgs/nav2/nav_info.gif" alt="Info" width="69" height="40"/></a>	</div>			<div id="nav_login">			<a href="http://www.threadless.com/join" onmouseover="showsubnav('login')"><img id="img_nav_login" src="http://media.threadless.com/imgs/nav2/nav_login.gif" alt="Login or Join" width="157" height="40"/></a>		</div>			<!-- subnav -->	<div id="nav_holder">		<div id="nav_holder_shop" style="display:none;">			<img src="http://media.threadless.com/imgs/nav2/subnav_shop.gif" width="452" height="60" alt="Shop"/>					<div class="navmenu">				<a href="http://www.threadless.com/catalog" id="nav_catalog" title="Shop full catalog"><i>Shop our full catalog</i></a>				<a href="http://www.threadless.com/stockchart" id="nav_stock" title="Check the stock chart"><i>Check the stock chart</i></a>				<a href="http://www.threadless.com/gallery" id="nav_gallery" title="Teeriffic Photos"><i>Teeriffic Photos</i></a>				<a href="http://www.threadless.com/12club" id="nav_12club" title="12 Club"><i>12 Club</i></a>				<a href="http://www.threadless.com/retail" id="nav_retail" title="Retail Store"><i>Retail Store</i></a>			</div>		</div>		<div id="nav_holder_participate" style="display:none;">			<img src="http://media.threadless.com/imgs/nav2/subnav_participate.gif?x=17" width="452" height="60" alt="Participate"/>				<div class="navmenu">				<a href="http://www.threadless.com/submissions" id="nav_submissions" title="Score Designs"><i>Score Designs</i></a>				<a href="http://www.threadless.com/submit" id="nav_submit" title="Submit Ideas"><i>Submit Ideas</i></a>				<a href="http://www.threadless.com/loves" id="nav_loves" title="Loves Threadless"><i>Loves Threadless</i></a>				<a href="http://www.threadless.com/streetteam" id="nav_streetteam" title="StreetTeam"><i>StreetTeam</i></a>				<a href="http://www.threadless.com/blogs" id="nav_blogs" title="Blog Forum"><i>Blog Forum</i></a>			</div>		</div>		<div id="nav_holder_info" style="display:none;">			<img src="http://media.threadless.com/imgs/nav2/subnav_info.gif" width="452" height="60" alt="Info"/>				<div class="navmenu">				<a href="http://www.threadless.com/news" id="nav_news" title="News & Updates"><i>News & Updates</i></a>				<a href="http://www.threadless.com/press" id="nav_press" title="Press Info"><i>Press Info</i></a>				<a href="http://www.threadless.com/contact" id="nav_contact" title="Get In Touch"><i>Get In Touch</i></a>				<a href="http://www.threadless.com/help" id="nav_help" title="Service & Help"><i>Service & Help</i></a>				<a href="http://www.threadless.com/orderstatus" id="nav_order" title="Order Status"><i>Order Status</i></a>			</div>		</div>						<div id="nav_holder_login" style="display:none;">			<table border="0" cellpadding="0" cellspacing="0"><tr>			<form method="post" id="nav_user_login_form">			<td><div style="border-right:1px dotted #a7a7a7;"><a href="/join"><img src="http://media.threadless.com/imgs/nav2/subnav_join.gif" width="160" height="52" alt="Join Threadless!"/></a></div></td>			<td style="line-height:20px;" align="right" class="grey">				&nbsp;&nbsp;&nbsp;Username:&nbsp;&nbsp;<br/>				Password:&nbsp;&nbsp;			</td><td>				<input type="text" name="username" value="" tabindex="1" style="width:80px;"/><br/>				<input type="password" value="" name="password" tabindex="2" style="width:80px;"/>			</td>			<td><input type="image" src="http://media.threadless.com/imgs/nav2/subnav_login.gif" tabindex="3" width="53" height="52" alt="Login!"/></td>			<td><a href="/forgot" class="grey">Forgot<br/>Your<br/>Password?</a></td>			</form>			</tr></table>			</div>			</div>	<script type="text/javascript">		function showsubnav(sn){		    Element.hide('nav_holder_shop');		    $('img_nav_shop').src='http://media.threadless.com/imgs/nav2/nav_shop.gif';		    Element.hide('nav_holder_participate');		    $('img_nav_participate').src='http://media.threadless.com/imgs/nav2/nav_participate.gif';		    Element.hide('nav_holder_info');		    $('img_nav_info').src='http://media.threadless.com/imgs/nav2/nav_info.gif';		    		    Element.hide('nav_holder_login');		    $('img_nav_login').src='http://media.threadless.com/imgs/nav2/nav_login.gif';		    		    $('nav_holder_'+sn).style.display='';		    $('img_nav_'+sn).src='http://media.threadless.com/imgs/nav2/nav_'+sn+'_r.gif';		}		showsubnav('shop');	</script>

  4. #3
    Member
    Join Date
    Jul 2008
    Posts
    32
    Member #
    17036
    and the CSS
    Code:
    #preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(/imgs/nav2/nav_shop_r.gif);
       background-image: url(/imgs/nav2/nav_shop.gif);
       background-image: url(/imgs/nav2/nav_participate_r.gif);
       background-image: url(/imgs/nav2/nav_participate.gif);
       background-image: url(/imgs/nav2/nav_info_r.gif);
       background-image: url(/imgs/nav2/nav_info.gif);
       background-image: url(/imgs/nav2/nav_account_r.gif);
       background-image: url(/imgs/nav2/nav_account.gif);
       background-image: url(/imgs/nav2/nav_login_r.gif);
       background-image: url(/imgs/nav2/nav_login.gif);
       background-image: url(/imgs/score_buyit_o.gif);
    } 
    /*main nav*/
    #nav_logo{position:absolute;left:0px;top:0px;}
    #nav_shop{position:absolute;left:204px;top:15px;}
    #nav_participate{position:absolute;left:279px;top:15px;}
    #nav_info{position:absolute;left:430px;top:15px;}
    #nav_account{position:absolute;left:499px;top:15px;}
    #nav_login{position:absolute;left:499px;top:15px;}
    /*global subnav stuff*/
    #nav_holder{z-index:650;position:absolute;left:204px;top:55px;height:60px;width:452px;} 
    .navmenu a i {visibility: hidden;}
    .navmenu a{z-index:650;display:block;overflow:hidden;position:absolute;text-decoration:none;top:0px;height:46px;background-image:url(/imgs/0.gif);}
    .navmenu a:hover{background-image:url(/imgs/nav_overlay.gif);}
    .navmenu {z-index:650;position:absolute;left:0px;top:14px;}
    /*subnav for shop*/
    #nav_catalog{width:77px;left:75px;}
    #nav_stock{width:62px;left:152px;}
    #nav_12club{width:54px;left:216px;}
    #nav_gallery{width:94px;left:270px;}
    #nav_retail{width:66px;left:364px;}
    /*subnav for participate*/
    #nav_submissions{width:70px;left:0px;}
    #nav_submit{width:70px;left:77px;}
    #nav_loves{width:105px;left:207px;}
    #nav_streetteam{width:67px;left:318px;}
    #nav_blogs{width:72px;left:383px;}
    /*subnav for info*/
    #nav_news{width:83px;left:10px;}
    #nav_press{width:63px;left:94px;}
    #nav_contact{width:67px;left:156px;}
    #nav_help{width:73px;left:286px;}
    #nav_order{width:68px;left:364px;}
    /*subnav for account*/
    #nav_accountpage{width:82px;left:0px;}
    #nav_orders{width:75px;left:82px;}
    #nav_profile{width:73px;left:158px;}
    #nav_post{width:70px;left:291px;}
    #nav_submitphoto{width:79px;left:360px;}
    /*cart stuff*/
    #nav_cart{position:absolute;left:702px;top:66px;width:225px;}
    #nav_cart_total{font-size:39px;line-height:39px;font-weight:bold;font-family:Arial;color:#1b325f;}
    /*user stuff*/
    #nav_holder_login{margin-top:8px;}
    #nav_user{position:absolute;left:702px;top:32px;width:225px;}
    .speech{padding-top:4px;padding-left:6px;background-image:url(/imgs/speech_bg.gif);height:25px;}
    .speech a{text-decoration:none;}
    #nav_login_error{z-index:901;position:absolute;left:499px;top:15px;}
    #nav_user_login_error{z-index:900;position:absolute;left:700px;top:32px;width:238px;border:1px solid #E7E7E7;background-color:#FFFFEE;font-family:arial;font-size:11px;}

  5. #4
    Member
    Join Date
    Jul 2008
    Posts
    32
    Member #
    17036
    sorry, for some reason the forum is throwing out the HTML bit and putting it into one line.
    If I try to edit that then it doesn't show up


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com