Top Slide Down Bar

**onedee** · Mar 2, 2012 19:52

Hi everybody,

I'm currently trying to implement a "Top bar that slides down" when a user scrolls down on a page. An exact example can be seen in the link below

Code:

www.shoplet.com

Scroll down to see the bar appear on top of the page!

I've tried coping the codes from that site but I can't get it to work exactly like that. Below is the HTML and CSS I've copied from the site. Can someone point to me what I'm missing? How can I get the html below to work like the top bar on the site above?

HTML CODE
[/CODE]

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="utili.css" rel="stylesheet" type="text/css" />

<script>
var myVerticalSlide = new Fx.Slide('utility-nav');
  $('exit').addEvent('click', function(event){
    event.stop();
    myVerticalSlide.slideOut();
	(function (){
	Cookie.write('Hide', 'hidden');
	$('utility-nav').setStyle('display', 'none'); }).delay(1000, this); 
  });

/*Quick Track */
window.addEvent('domready', function() {
	$('track').addEvent('mouseover', function(){
    $('trackdrop').setStyle('display', 'block');
	});
	$('track').addEvent('mouseout', function(){
    $('trackdrop').setStyle('display', 'none'); 
	}); 
});

</script>

</head>

<body>

<div style="margin: 0px; visibility: visible; opacity: 1;" id="utility-nav">
<a id="exit" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Hide']);"><p>X</p><span>HIDE</span></a>
	<div id="utility-wrap">
    <!--<div id="utility-pink-ribbon"><a href="/promotions/cityofhope.html" onClick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Pink']);"></a></div>-->
		<div id="utility-logo"><a href="/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_home']);"><span></span></a>
		</div>
		<div class="utility">
                    <form action="http://www.shoplet.com/search/search/" name="main_search" method="post">
                        <div id="utilsearchfield"><span></span>
                            <input class="input_placeholder" value="" placeholder="What does your business need today?" id="utilsearchtext" name="text" autocomplete="off" type="text">
                            <script type="text/javascript">new PlaceholderInput($('utilsearchtext'))</script>
                        </div>
                        <button type="submit" id="utilgo" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_search']);return submitGo(utilsearchtext);"></button>
                    </form>
		</div>
		<div id="utility-links">
		<a href="/cart/view/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_editCart'])">Edit/View Cart</a> |
		<a href="https://www.shoplet.com/checkout" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_checkout'])">Checkout</a> |
		<a href="/account/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_myAccount'])">My Account</a> |
				<a onclick="boldChat(); return false;_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Livehelp']);" target="_blank" href="http://livechat.boldchat.com/aid/1530656560879384919/bc.chat?cwdid=836829135506329118&amp;vr=&amp;vn=&amp;vi=&amp;ve=&amp;vp=&amp;iq=&amp;curl=">LiveHelp</a>
		        
		</div>
	</div>
</div>

</body>
</html>

CSS

Code:

body {
    line-height: 1;
}


#searchBar {
    background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 50px;
    width: 540px;
}
#searchBar form {
    height: 100%;
}
#searchfield {
    background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") no-repeat scroll -7px -55px transparent;
    border: 0 none;
    float: left;
    height: 37px;
    margin: 7px 0 0 7px;
    position: relative;
    width: 417px;
    z-index: 50;
}
#searchfield.focus {
    background-position: -7px -105px;
}
#searchfield span {
    background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") no-repeat scroll -17px -60px transparent;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    left: 10px;
    position: absolute;
    top: 5px;
    width: 25px;
}
#searchfield.focus span {
    background-position: -17px -110px;
}
#searchtext {
    background: url("http://images.shopletcdn.com/img/none.png") repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 18px;
    left: 38px;
    line-height: 20px;
    outline: medium none;
    padding: 6px 2px 0;
    position: absolute;
    width: 360px;
    z-index: 20;
}
#searchfield b {
    font-size: 18px;
    font-weight: 400;
    left: 40px;
    padding: 10px 2px;
    position: absolute;
    z-index: 19;
}
#searchfield b.overlay span {
    background: none repeat scroll 0 0 transparent;
    opacity: 0.8;
    position: static;
    width: 350px;
}
.input_placeholder {
    color: #444444;
}
button#go {
    background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") repeat scroll -430px -55px transparent;
    border: 0 none;
    float: left;
    height: 37px;
    margin: 7px 0 0 6px;
    width: 102px;
}
button#go:hover {
    background-position: -430px -105px;
}
button#go:active {
    background-position: -430px -255px;
}
input[type="submit"] {
    outline: 0 none transparent;
}
#utilsearchfield {
    background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    float: left;
    height: 37px;
    margin: 10px 0;
    position: relative;
    width: 358px;
    z-index: 50;
}
#utilsearchfield.focus {
    background-position: 0 -40px;
}
#utilsearchfield span {
    background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") no-repeat scroll -10px -5px transparent;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    left: 10px;
    position: absolute;
    top: 5px;
    width: 25px;
}
#utilsearchfield.focus span {
    background-position: -10px -45px;
}
#utilsearchtext {
    background: url("http://images.shopletcdn.com/img/none.png") repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 16px;
    left: 38px;
    line-height: 18px;
    outline: medium none;
    padding: 6px 2px 0;
    position: absolute;
    width: 320px;
    z-index: 20;
}
#utility-nav {
    background-color: #E4EEFC;
    border-bottom: 1px solid #999999;
    box-shadow: 0 1px 5px #777777;
    height: 70px;
    left: 0;
    position: fixed;
    text-align: center;
    top: -20px;
    visibility: hidden;
    width: 100%;
    z-index: 99999999;
}
#utility-wrap {
    float: none;
    margin: 20px auto auto;
    position: relative;
    text-align: center;
    width: 960px;
}
#utility-logo {
    float: left;
    height: 30px;
    margin: 10px 40px 0 0;
    width: 86px;
}
#utility-logo span {
    background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") repeat scroll 0 -80px transparent;
    border: 0 none;
    display: block;
    height: 30px;
    width: 86px;
}
#utility-links {
    color: #999999;
    float: right;
    font-size: 11px;
    font-weight: 700;
    line-height: 30px;
    margin: 10px 40px 0 0;
    text-align: right;
}
#utility-links a {
    margin: 0 5px;
}
.utility {
    float: left !important;
    margin: 0 auto !important;
    position: relative;
    text-align: center !important;
}
#exit {
    bottom: 7px;
    color: #0187C5;
    height: 14px;
    position: absolute;
    right: 7px;
    width: 50px;
}
#exit span {
    float: right;
}
#exit p {
    background-color: #0187C5;
    border: 1px solid #0187C5;
    color: #FFFFFF;
    float: right;
    font-size: 8px;
    height: 12px;
    line-height: 11px;
    margin: 0 0 0 4px;
    text-align: center;
    width: 12px;
}
button#utilgo {
    background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") repeat scroll -363px 0 transparent;
    border: 0 none;
    float: left;
    height: 37px;
    margin: 10px 0 0 5px;
    width: 102px;
}
button#utilgo:hover {
    background-position: -363px -40px;
}
button#utilgo:active {
    background-position: -363px -40px;
}
input[type="submit"] {
    outline: 0 none transparent;
}

**onedee** · Mar 4, 2012 21:01

Anyone fancy to help me tackle this one?

**centered effect** · Mar 4, 2012 21:15

Fx.Slide is a MooTools function, which is not included in the code above, but that should give you part of what you are trying to accomplish

**onedee** · Mar 4, 2012 22:06

Originally Posted by centered effect

Fx.Slide is a MooTools function, which is not included in the code above, but that should give you part of what you are trying to accomplish

thanks for taking the time to help out - problem solved.

**beechyrichard** · Apr 25, 2012 12:22

Can you tell us what the solution was? I have a test page here http://beta.heartfeltcreations.us/testslide.php
The only way i can make the bar show is if i style the div like this <div id="utility-nav" style="visibility: visible;">
I only want it to slide down when the user scrolls.

**irishman** · Apr 26, 2012 03:36

Try this, its seems fairly simple. http://net.tutsplus.com/tutorials/ht...rop-down-menu/

**beechyrichard** · Apr 26, 2012 04:30

Originally Posted by irishman

Try this, its seems fairly simple. http://net.tutsplus.com/tutorials/ht...rop-down-menu/

I'm sorry i mean't the bar that drops don when you scroll down the page not the menu bar. Visit shoplet.com and scroll down the page and a bar will drop out from the top of their site with a search box and helpful links.

Thanks!

**beechyrichard** · Apr 26, 2012 05:24

I ended up using a different MooTools js package and it works now.

Thanks!

User Tag List

Thread: Top Slide Down Bar

Thread Tools

Display

Top Slide Down Bar

What was the solution?

Bookmarks

Bookmarks

Posting Permissions