Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Vertical Menu

  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical Menu

    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
    Last edited by noomrevlis; 05-07-2012 at 08:35 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •