Create menubar with close and open button

Ads by Google
Create menubar with close and open button
Instructions for Blogger
1. Search for ]]></b:skin> and paste the following CSS code immediately before it.


#menubar {
    border-bottom:3px solid #ECF1EF;
    background:url('bg1.png') repeat-x;
    font-size:14px;
    font-family: Arial, Helvetica, Sans-serif;
    color:#FFF;
    padding:10px 0px;
    position:relative;
    top:0;
    left:0;
    z-index:2000;
    width:100%;
    text-align:center;
    height:20px;
}
#menubar a {
    color:#FFF;
    text-decoration:none;
}
#closebtn {
    background:url('close.png') top no-repeat;
    border:none;
    margin-left:15px;
    position:absolute;
    cursor:pointer;
}
#menu {
    cursor:pointer;
    position: relative;
    z-index: 1000;
}

/* Optional for subscribe box */
      
.menubar {
    margin: 0pt auto;
    width: 600px;
}
.menubar form {
    float: left;
    margin: 1px 10px 0;
    width:275px;
}
.menubar .sbox {
    border: 1px solid #555555;
    border-radius: 5px 5px 5px 5px;
    color: #888888;
    float: left;
    margin: -2px 0 0;
    padding: 3px;
    width: 155px;
}
.menubar     .go {
    float: left;
    margin: -2px 0 0 10px;
    height: 24px;
}
.menubar #closebtn {
   margin-left: -20px;
}

2. Add the following jQuery scripts before closing </head> tag.

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    function anim(duration){
        $('#menu').animate(
            {height: 'toggle'},
            {duration: duration, specialEasing: {height: 'easeOutBounce'}}
        );
    }

    $('#closebtn').click(function() {
        $('#menubar').slideUp();
        anim(800);
    });

    $('#menu').click(function() {
        anim(500);
        $('#menubar').slideDown('slow','easeOutBounce');
    });
});
</script>

3. Add the HTML code immediately after opening <body> tag.


<div id="menubar">
        <div class="menubar">
            <span style="float: left; margin: 3px 0pt 0pt; font-weight: bold;">Get the latest updates from us for free</span> 
            <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?thedoctortemplate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
            <input type="email" name="email" class="sbox" placeholder="Your email address here!"/>
            <input type="hidden" name="uri" value="thedoctortemplate"/>
            <input type="hidden" value="en_US" name="loc"/>
            <input type="submit" value="Subscribe" class='go'/>
            </form>
            <input type='button' id='closebtn' />
        </div>
</div>
<div id="mint" style="display:none;position:absolute;top:0;right:10px;">
    <img src="ribbon1.png" />
    <input type='hidden' id='mint' />
</div>
 
Powered By Blogger ©2011 - White blending ads Template | Design by: Rea Alfa The Doctor Template| Sponsored by: Freia media