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>

 

 

Multi-user application – Demo Game – RC Wars

Here is the update of my earlier post Multi-user application using Unity3d now web based 🙂

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Updates:

Title: RC Wars (Remote control car wars hehe)

Controls:
WASD = move
Space = shoot
E = reset position (when your player got stuck up-side-down)

Game Objects:
Hummer = Player
Range Rover = Enemies (tons of non stop spawning enemies – will limit on next update)

Map:
Forest / Terrain – tons of trees and land obstacles

Features:
Shoot the enemies with unlimited bullets
Enemy now shots back player

Bugs: (will be fixed on next update)
Players starts on one exact location
Super unlimited enemy

How to play:

> Download and install this webplayer for windows    webplayer for mac
> Load the game click here – its around 1.5MB (yes its only that small for a very nice looking 3d game level design)
> Once loaded, select for either “Master Server”(recommended) or “IP Direct Connection” (option only in case u can’t use master server)
> On Master Server – click “Start Server” then wait for other computers/players within your Local Area Network (LAN) to see a server is running (refresh/retest connection) and join in when they see a new button with an IP address (of the server) – then click “Network” and voila – gameON!!!

> On IP Direct Connection – click “Start Server” – then give your IP address to other players on the LAN. – other players will type-in the servers IP then click connect – and voila – gameON!!!

Next features:
> Player life meter
> Player re-spawn
> Score board
> Chat
> Sound FX

Whats surprising is.. this entire 3d application only took me less than 3 weeks (2-3 hours a day) to work with while at my very busy working schedule  of course with a little help from my colleagues 🙂

New client: Technology Business Incubator

Website of the Technology Business Incubator at CLSU Philippines.

The website is now online (but we are still working on the design).

see Technology Business Incubator upcoming website

Also, thanks to Sir. Joel Villanueva Villaruel for the support and helping us win the project