Webber 2.0 Dock Menu Tutorial
In this short tutorial I will go though the CSS and a little bit of Javascript that creates the Webber 2.0 Dock Menu.
First things first though. I need to give credit where credit is due. I was browsing around the web and came across this site. http://whalesalad.com/. In one of his articles that he wrote, he built a similar menu that you can find here. http://www.whalesalad.com/2006/07/12/osx-style-web-dock/. His attempt was fairly good, however it didn't work in any browser other than FireFox. Well, to say the least, this wasn't very good as FireFox was only used by 28% of the web population last time I checked. I thought to myslef, I could do that menu fairly easily since the contact section of my site uses the same principal. So I gave it a shot.
The meat of the menu of course is the javascript. The javascript was written by Philippe Maegerman which you can find on his blog. The hide_menu.js contains the tween.js code script needed to move the menu and two extra functions I added for the mouse events. However, on Philippe Maegerman's blog, he has ColorTween.js, OpacityTween.js, TextTween.js, Sequence.js, and Parallel.js. All which can do marvelous effects to many many objects. I suggest that if you get some spare time, go check out his extensive tutorials on how to use them! On a side note, if you happen to know anything about the tween.class in Macromendia Flash, you will catch on to Philippe Maegerman's javascript very fast, as it uses Robert Penner's tween classes. Aren't we one big happy family! :-D
Inside the zip you will find these files:
- index.html
- styles.css
- hide_menu.js
- 7 images used for the menu and this page.
Please note that the images for the menu are .pngs with transparency. If you are using Internet Explorer 6 or below, you will not see the transparency. You can change the images out to gifs, jpegs or whatever suits your fancy ;-)
Now, lets get on with the Webber 2.0 Dock Menu!
The HTML and CSS
Lets take a look at the HTML and CSS together. I find it easier to learn when I go over one thing at a time.
Make sure you add the code to include the hide_menu.js in between the <head> tags.
<script type="text/javascript" src="hide_menu.js"></script>
First thing we need to add is the invisible hit_area div that will be positioned at the very top by default since it is the first element in the body. In this case I made the hit area 100% wide and 120px height. This gives an adequate area for the mouse to activate the menu.
<div id="hit_area"></div>
#hit_area {
height: 120px;
width: 100%;
margin: 0px;
padding: 0px;
display: block;
background-image: url(badge.jpg);
background-repeat: no-repeat;
}
Next we add the menu_holder div which is what will slide the menu down. The trick with this div is to position it absolutely at a negative value. In this case I used top: -58px, which is the height of the menu png. It is also very important that the height be 58px and the width be 100% and display is set to block.
<div id="hit_area"></div>
<div id="menu_holder">
</div>
#menu_holder {
height: 58px;
width: 100%;
display: block;
position: absolute;
top: -58px;
}
Inside the menu_holder div we insert the nav div. The nav div is used pretty much for a container for the menu so we can center it in the page horizontally as well as a place to insert the right side rounded corner image.
<div id="hit_area"></div>
<div id="menu_holder">
<div id="nav">
</div>
</div>
#nav {
height: 58px;
width: 542px;
margin: 0px auto;
padding: 0px;
background-image: url(right.png);
background-repeat: no-repeat;
background-position: right;
}
Inside the nav we add an <ul> and our links. Then we use a little more CSS to style the <ul> and <li>. One thing I will mention is that the <li> tags need to be floated left. Other wise the <ul> will be vertical and not horizontal. A couple other tricks is to use text-align center on the <li>, to center horizontally, and to use a line height that is equal to the height of the nav to center the text vertically. In this case its 58px. You will also see that for the <ul> I added a background image for the left side rounded corner image. I then added some left padding that is the width of the image, 21px.
<div id="hit_area"></div>
<div id="menu_holder">
<div id="nav">
<ul>
<li><a href="http://jstween.blogspot.com">jstween</a></li>
<li><a href="http://ww.2210media.com">2210media</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.cssmania.com">CSS Mania</a></li>
<li><a href="http://www.kirupa.com">Kirupa</a></li>
</ul>
</div>
</div>
#nav ul {
margin: 0px;
padding: 0px 0px 0px 21px;
height: 58px;
list-style-type: none;
background-image: url(left.png);
background-repeat: no-repeat;
}
#nav li{
margin: 0px;
padding: 0px;
float: left;
}
#nav li a:link, #nav li a:active, #nav li a:visited {
background-image: url(middle.png);
background-repeat: repeat-x;
height: 58px;
width: 100px;
display: block;
line-height: 58px;
font-weight: bold;
color: #666666;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 120%;
}
#nav li a:focus, #nav li a:hover{
text-decoration : none;
-moz-outline:0;
color: #FFFFFF;
background-image: url(rollOver.png);
background-repeat: repeat-x;
}
Next we add the div that we use to move the menu back up. In this case I used a container that will wrap the content that you are reading now and just called it hit_test2. You could actually assign the event to move the menu back up to any div you please.
<div id="hit_area"></div>
<div id="menu_holder">
<div id="nav">
<ul>
<li><a href="http://jstween.blogspot.com">jstween</a></li>
<li><a href="http://ww.2210media.com">2210media</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.cssmania.com">CSS Mania</a></li>
<li><a href="http://www.kirupa.com">Kirupa</a></li>
</ul>
</div>
</div>
<div id="hit_area2">
<!-- tutorial content here -->
</div>
#hit_area2 {
width: 100%;
background-image: url(activate_text.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 0px;
display: block;
position: absolute;
margin: 0px;
left: 0px;
top: 120px;
}
Lastly we add the onmouseover events to call the functions to slide the menu up or down on our two hit_area divs.
<div id="hit_area" onmouseover="toggleDown();"></div>
<div id="menu_holder">
<div id="nav">
<ul>
<li><a href="http://jstween.blogspot.com">jstween</a></li>
<li><a href="http://ww.2210media.com">2210media</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.cssmania.com">CSS Mania</a></li>
<li><a href="http://www.kirupa.com">Kirupa</a></li>
</ul>
</div>
</div>
<div id="hit_area2" onmouseover="toggleUp();">
<!-- tutorial content here -->
</div>
The javascript
Inside the hide_menu.js all I added was a function to initiate the onmouseover events for the divs to activate the menu. Please make sure you read the documentation on Philippe Maegerman's blog to understand what everything is doing inside the functions. Everything below these two functions is the javascript tween code written by Philippe Maegerman.
// define a var down to false
var down = false;
// if down equals false and the mouse is over the div hit_area, slide the menu down
function toggleDown() {
if(down==false){
down=true;
t1 = new Tween(document.getElementById('menu_holder').style, 'top', Tween.strongEaseOut, -58, 0, .6, 'px');
t1.start();
}
}
// if down equals true and the mouse is over the div hit_area2, slide the menu up
function toggleUp() {
if(down==true){
down=false;
t1 = new Tween(document.getElementById('menu_holder').style, 'top', Tween.strongEaseIn, 0, -58, .4, 'px');
t1.start();
}
}
And thats it! Its very simple method to add some fun interactivity to your web site. If you read the documentation over at Philippe Maegerman's blog, you will soon realize that there are MANY things you can do with his fabulous tween code. If you have any questions, feel free to contact me through my web site at www.2210media.com.
Thanks for taking the time to read this and hopefully you learned something!
Peace!
Josh Rhame
p.s. A couple things to note. If you move the mouse spasticly over the two divs, yes, the menu will freak out some. I am not a hardcore coder, so if you know of a way to clean it up, have at it! :-)
p.s.s. Yes, Im making fun of the phrase web 2.0, which I think is totally dumb ;-)
代码整理：懒人图库 ＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。 |