This will be our end result, but how do we make it?? Lets get started.
Firstly open your text editor of choice, notepad, Dreamweaver etc and create a new document.
1. We will have a container for our menu, a h1 title tag, an image of the dots, which will act as our toggle to enable to menu to open and close, and then a simple unordered list.
2. Add this code in between the body tags of your new document.
<div class="menu-container">
<h1>Drop Down Menu</h1>
<a class="toggle" href="#"><img src="images/dots.png" class="dots" /></a>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div><!--ends menu-container-->
What we have here is the menu-container, which holds all our items, a simple header, the dots image and then 4 list items.
Save this code, and then create a new CSS style sheet and link to it in the head of your document and then lets move to this CSS file to make the menu more interesting.
3. Lets start with the menu-container, add this CSS code to your CSS file..
.menu-container {
background:#061f4a;
min-height:55px;
margin:100px auto;
overflow:hidden;
width:400px;
}
What we are doing is adding a nice blue colour to the background of the container, getting a minimum height of 55px ( this is set so that when closed only the header and dots image will show, but when the menu is opened the container height is flexible so it can grow to the new full size), we center the menu in the page using margins, set the width as 400px and then importantly set the overflow to hidden. This will hide our list items as these will overflow the min-height of 55px.
4. Lets style the menu header and add the dots image.
.menu-container > h1 {
color:#e7e7e7;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:24px;
float:left;
padding-left:10px;
}
.dots {
float:right;
margin-right:10px;
margin-top:2px;
}
All we do here is set the styles for the h1 tag, and then position the dots image to the right hand side of the menu-container.
5. Now to style the menu list elements , which will be a simple block style list one under each other..
ul.menu {
float:left;
margin:0;
padding:0;
width:400px;
}
we float the menu to the left and reset the margins, and give it a width of 400px so it fits the container element.
ul.menu li {
border-top:1px solid #111;
list-style:none;
}
we give each list item a top border so they can easily be seen as separate elements, and remove the bullet point.
ul.menu li a {
color:#f9f9f9;
display:block;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
height:50px;
padding:25px 0px 0px 10px;
text-decoration:none;
}
we style the list elements by giving the text a white colour, display them as block elements so they fill the width of the container, set the font styles, give each list element a height of 50px and add some padding so the text is nicely positioned, and then we remove the under line from the text.
ul.menu li a:hover {
background:#f1f1f1;
color:#111;
}
this styles the hover part, so we change from a blue colour to white block when we hover over the list and then change the text to black.
This is all the css and html and your list should look like this....
6. So now we need to add some jQuery to make the list scroll up and down and hide the list elements..
So back in the HTML document, we need to link to the jQuery library and then start scripting.
Add a link to the jQuery library in the head of the document
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
and then we add this jQuery code underneath..
<script>
$(document).ready(function() {
$('.menu').hide();
$('.toggle').click(function() {
$('ul.menu').slideToggle();
return false
return false
});
});
</script>
So firstly we add the default opening jQuery statement to start a function.
We then hide the menu elements when the page loads, so that the list will look like the image below, as we want it.
Then when the dot image, which has a link class of toggle, is clicked do this --
Set the menu list items to slide up and slide down when the dots are clicked again.
We add return false so it stops the anchor tag linking to and opening the # link.
We add return false so it stops the anchor tag linking to and opening the # link.
Simple :)
No comments:
Post a Comment