Vertical Menu

noomrevlis · 05-07-2012, 08:32 PM

First time trying to code anything. Am trying to make a vertical menu like one below, which originally only shows the triangle at the top of the page and expands (slides down) on mouseover.

No idea how to begin coding this in CSS and/or Javascript!

My HTML at the moment is this:

Code:

<div id="nav">	
	<ul id="menu">
	<li><a href="Home.htm">Home</a>
	      <ul>
	      <li><a href="About.htm">About</a></li>
	      <li><a href="Work.htm">Work</a></li>
	      <li><a href="Contact.htm">Contact</a></li>
	</ul>
	</ul>
	</div>

And CSS (which I've been messing around with, so is probably all over the place) is this:

Code:

.triangle {
border-color: #EE3B3B transparent transparent transparent;
border-style: solid;
border-width: 80px 80px 0px 80px;
height: 0px;
width: 0px;
}

.triangle {position:absolute;
		right:84%}

#menu	{padding:0px; 
	margin:0px; 
	list-style-type:none; 
	height:30px}
	
#menu li a {
	padding:30px 10px; 
	display:block; 
	text-decoration:none}

#menu {position:absolute;
		right:87%}

#name {position:absolute;
		top:50%}

Image: http://i1075.photobucket.com/albums/...Picture1-1.png

Excavator · 05-07-2012, 11:45 PM

Hello noomrevlis,
Are you working from scratch or following a tutorial?
Either way, you will appreciate the links about validation in my signature line. Validating can find errors that can go unnoticed when editing or copy/pasting code... like the missing </li> in the code you've posted here.

The CSS you've posted doesn't do a lot. We are missing .triangle and #name in the markup and none of the code you've posted is presenting the image you gave us.

Just to start off, here is a valid html document with the code you've provided. Notice I've highlighted the missing </li> in red. There is still plenty more to be done to make it work, valid doesn't necessarily mean it works the way you want it to.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.triangle {
	border-color: #EE3B3B transparent transparent transparent;
	border-style: solid;
	border-width: 80px 80px 0px 80px;
	height: 0px;
	width: 0px;
}
.triangle {
	position:absolute;
	right:84%
}
#menu {
	padding:0px;
	margin:0px;
	list-style-type:none;
	height:30px
}
#menu li a {
	padding:30px 10px;
	display:block;
	text-decoration:none
}
#menu {
	position:absolute;
	right:87%
}
#name {
	position:absolute;
	top:50%
}
</style>
</head>
<body>
    <div id="nav">	
        <ul id="menu">
            <li><a href="Home.htm">Home</a>
                <ul>
                    <li><a href="About.htm">About</a></li>
                    <li><a href="Work.htm">Work</a></li>
                    <li><a href="Contact.htm">Contact</a></li>
                </ul>
            </li>
        </ul>
    <!--end nav--></div>
</body>
</html>

Excavator · 05-08-2012, 12:05 AM

Look what it can look like before you make the dropped ul hidden until hover -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
#menu {
	width: 255px;
	height: 695px;
	margin: 0;
	padding: 0 0 150px 20px;
	list-style-type: none;
	background: url(http://i1075.photobucket.com/albums/w423/DarkMagician_94/Picture1-1.png) bottom;
}
#menu li a {
	padding:30px 10px;
	display:block;
	text-decoration:none
}
</style>
</head>
<body>
    <div id="container">	
        <ul id="menu">
            <li><a href="#">Home</a>
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </li>
            <li><a href="#">linky</a></li>
            <li><a href="#">linky</a></li>
            <li><a href="#">linky</a></li>
            <li><a href="#">linky</a></li>
            <li><a href="#">linky</a></li>
        </ul>
    <!--end container--></div>
</body>
</html>

For dropdowns, have a look at some demo menus:

one
two