Home
1
Creating a Sweet Navigation Mon Nov 22, 2010 6:02 am
Drogba921
Registered Member
Posts : 93
Points : 39
Age : 28
Location : MN
Browser :
Many people need navigation bars for their websites, but not many of them know how to make them really cool.
Below is a tutorial to make your navigation show like thus on my website:
Tutorial Example:
http://www.hunnisett.us/mikesworld/experiment.cfm]EXAMPLE
___
This tutorial uses HTML, CSS and Javascript.
First off is making the menu.
For this, we'll use a UL class and a LI.
Here's the code
Next, you need to add a description, put it in a <div>tag.
Next, you'll need the CSS.
Here it is.
Explanations:
ul.sidenav {
float: left;
margin: 130px 0 0;
padding: 0; // How much space
width: 200px; //How wide you want the sidebar
list-style: none;
border-bottom: 1px solid #3373a9; //Border color
border-top: 1px solid #003867;
font-size: 1.2em; //size of font
}
ul.sidenav li div {
display: none;
position: absolute;
top: 2px;
left: 0;
width: 225px;
font-size: 0.9em;
background: url(https://2img.net/r/ihimizer/img607/697/bubbletop.gif) no-repeat right top;
} DO NOT EDIT, THIS IS A REQUIRED FEATURE
ul.sidenav li div p {
margin: 7px 0;
line-height: 1.6em;
padding: 0 5px 10px 30px;
background: url(https://2img.net/r/ihimizer/img607/4494/bubblebtm.gif) no-repeat right bottom; DO NOT EDIT, THIS IS REQUIRED
}
__
Next, you'll need the javascript. Add this to your <head>tag
<script type="text/javascript">
$(document).ready(function(){
$("ul.sidenav li").hover(function() {
$(this).find("div").stop()
.animate({left: "210", opacity:1}, "fast")
.css("display","block")
}, function() {
$(this).find("div").stop()
.animate({left: "0", opacity: 0}, "fast")
});
});
</script>
Also add:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
And this should be it!
Good luck!
Below is a tutorial to make your navigation show like thus on my website:
Tutorial Example:
http://www.hunnisett.us/mikesworld/experiment.cfm]EXAMPLE
___
This tutorial uses HTML, CSS and Javascript.
First off is making the menu.
For this, we'll use a UL class and a LI.
Here's the code
- Code:
<ul class="sidenav">
<li>
<a href="LINK">Title</a>
</li></ul>
Next, you need to add a description, put it in a <div>tag.
- Code:
<ul class="sidenav">
<li>
<a href="LNIK">Title</a>
<div><p>Description!</p></div>
</li></ul>
Next, you'll need the CSS.
Here it is.
- Code:
<style type="text/css">
ul.sidenav {
float: left;
margin: 130px 0 0;
padding: 0;
width: 200px;
list-style: none;
border-bottom: 1px solid #3373a9;
border-top: 1px solid #003867;
font-size: 1.2em;
}
ul.sidenav li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
ul.sidenav li a{
border-top: 1px solid #3373a9;
border-bottom: 1px solid #003867;
padding: 10px 10px 10px 25px;
display: block;
color: #fff;
text-decoration: none;
width: 165px;
background: #005094 url(http://img577.imageshack.us/img577/9224/sidenavlia.gif) no-repeat 5px 10px;
position: relative;
z-index: 2;
}
ul.sidenav li a:hover {
background-color: #004c8d;
border-top: 1px solid #1a4c76;
}
ul.sidenav li div {
display: none;
position: absolute;
top: 2px;
left: 0;
width: 225px;
font-size: 0.9em;
background: url(http://img607.imageshack.us/img607/697/bubbletop.gif) no-repeat right top;
}
ul.sidenav li div p {
margin: 7px 0;
line-height: 1.6em;
padding: 0 5px 10px 30px;
background: url(http://img607.imageshack.us/img607/4494/bubblebtm.gif) no-repeat right bottom;
}
</style>
Explanations:
ul.sidenav {
float: left;
margin: 130px 0 0;
padding: 0; // How much space
width: 200px; //How wide you want the sidebar
list-style: none;
border-bottom: 1px solid #3373a9; //Border color
border-top: 1px solid #003867;
font-size: 1.2em; //size of font
}
ul.sidenav li div {
display: none;
position: absolute;
top: 2px;
left: 0;
width: 225px;
font-size: 0.9em;
background: url(https://2img.net/r/ihimizer/img607/697/bubbletop.gif) no-repeat right top;
} DO NOT EDIT, THIS IS A REQUIRED FEATURE
ul.sidenav li div p {
margin: 7px 0;
line-height: 1.6em;
padding: 0 5px 10px 30px;
background: url(https://2img.net/r/ihimizer/img607/4494/bubblebtm.gif) no-repeat right bottom; DO NOT EDIT, THIS IS REQUIRED
}
__
Next, you'll need the javascript. Add this to your <head>tag
<script type="text/javascript">
$(document).ready(function(){
$("ul.sidenav li").hover(function() {
$(this).find("div").stop()
.animate({left: "210", opacity:1}, "fast")
.css("display","block")
}, function() {
$(this).find("div").stop()
.animate({left: "0", opacity: 0}, "fast")
});
});
</script>
Also add:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
And this should be it!
Good luck!
