Basic & Simple HTML-CSS Menu show/hide SubMenu

This is my tutorial in making basic & simple HTML/CSS Menu that shows & hide SubMenus on Mouse Over. There are many other tutorials out there that maybe be better but quite complicated and heavy for beginners.

here it goes:

Create a style tag for your menu, dont forget the html/head/body tags – remember to put your stylesheet inside head tag.

<style>
.menu{}

</style>

Leave it without any parameters/option for now (later do as u wanted 🙂

next, add  the menu list

.menu li{}

if you want horizontal menu use float:left on list tags <li> else the default appearance will be vertical menu. then add your other style of your liking such as width, height, background-color/images, etc. (later recommended)

.menu li{ float:left}

next will be your submenu, hide it using display:none (or visibility: hidden for CSS3)

.menu ul{display:none}

Remember your main menu is at <li> tags and it holds your submenus at <ul> tags

<li>menu

<ul>submenu</ul>
<ul>submenu2</ul>

</li>

Now here comes the magic that will reveal the submenu when the mouse is located over the menu (hovering they say)

add the following to your style

.menu li:hover ul{display: block;}

then again, add your other style of your liking such as width, height, background-color/images, etc.

see it live at  http://artpologabriel.com/wp-content/uploads/2012/06/1.html

test it – submenu will be in – now u see now u don’t – state 🙂

 

Final code:

 

<html>
<head>

<style>
.menu{
float:left;
}
.menu li{
float:left;
display: block;
width: 200px;
height; 50px;
}
.menu ul{
display: none;
}
.menu li:hover ul{
display: block;
background-color: blue;
}
</style>
</head>
<body>

<div>
<li>home
<ul>home 1</ul>
<ul>home 2</ul>
</li>
<li>about
<ul>bout</ul>
<ul>bout2</ul>
</li>
<li>contact
<ul>contact1</ul>
<ul>contact2</ul>
</li>
</div>
</body>
</html>

 

 

Web dev trick: jquery load () plus friendly url [solved]

 

Web dev trick: friendly url without using .htaccess / mod_rewrite [solved]

Recepies:

bunch of Javascripts

So here it is :

We all know that its easy to load or inject a content to an already loaded page using jquery.load() function, but the usual problem is “the url bar”, “page title” is not updating, and the biggest problem is when the user refresh the page, its all gonna go back to the state of the page it was first loaded.

So how are we gonna do that because when we click a normal <a> tag the page will go to that url and leaves the page you are currently on. Continue reading