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 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    simple collapsable/expandable vertical navigation

    Hi, i'm in need of a very simple verticle exapndable/collapasable navigation menu something like.

    eBook
    Online services -
    service 1
    service 2
    service 3
    Impact of ICT +
    The digital divide +
    Bibliography +
    Design
    Testing
    Evaluation

    So - closes it and + opens.

    I dont need any styling just a working menu. The tutorials all go through styling but i dont need it.


    Thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello noobtouch,
    The menu itself would just be a simple unordered list. It's the styling that makes it open and close so you need to have it.

    Take a look at some menus that are pretty much just ready to grap and use at http://www.cssplay.co.uk/menus/ ...maybe you can find one there you like.
    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

  • Users who have thanked Excavator for this post:

    noobtouch (02-12-2011)

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    when i edited i must of deleted the whole thing apart from the code.

    anyways: http://www.uploadhouse.com/viewfile....e4f6dc6e82988: this is what it looks like when i try using a specific menu from cssplay. The one which will probs work best for my site. This is the link for the menu: http://www.cssplay.co.uk/menus/vertical_slide.html. as you can see loads of the menu is missing. i was wondering if anyone can help me put this into my site. im a noob and im doing something stupid no doubt.

    Thanks

    my css/html below

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.1">
    <style type="text/css">
    
    html,body{margin:5px;padding:0px}
    body{
    font: 76% arial,sans-serif;
    text-align:center;
    background:#FFFFFF}
    
    
    p{margin:0px 10px 10px}
    a{display:block;color: #981793;padding:10px}
    
    div#header{height:50px;margin:0;padding-left:10px
    ;background:url(images/banner.gif)}
    div#container{text-align:left}
    div#content p{line-height:1.4}
    div#content{ background:#F0F0F0}
    div#navigation{background:#B9CAFF}
    div#extra{background:#F0F0F0}
    div#footer{background:#284C93;color:#F0F0F0}
    div#footer p{margin:0;padding:5px 10px}
    
    div#container{width:1024px;margin:0 auto;border-top-width:thin;border-right-width:1px;
    border-bottom-width:1px;border-left-width:1px;border-top-style:none;border-right-style:solid;
    border-bottom-style:none;border-left-style:solid; border-bottom-color:#b0b0b0;border-left-color:#DEDFDE;
    border-right-color:#b0b0b0;}
    
    div#content{float:left;width:824px;}
    div#navigation{float:right;width:200px}
    div#extra{float:left;width:824px}
    div#footer{clear:both;width:100%}
    
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="header"></div>
    <div id="wrapper">
    
    <div id="content">
    <p></p>
    <p><strong>Introduction to eBook....</strong> </p>
    <p> The purpose of this eBook is to give you an idea of what life was like at the the start of 21st century. The following pages will allow you to understand in greater detail what life was like for me and for the other 6 billion people who were living on the earth at the same time as me. You will learn about the Internet's capabilities and limitations 100 years ago, the effects that ICT had upon everyday life and the 'gap' that grew between different groups of people which was also known as 'the digital divide'. </p>
    
    <p>From now on step into my shoes, the year is 2010: </p>
    
    <p> "Information communication technology is developing at a phenomenal pace! We are living in an age in which a gigantic amount of information is produced and processed in digital format every second. This information is also able to travel thousands upon thousands of miles in a few moments. </p>
    
    <p> This is done by using different online services that are available on the Internet. The advance of the Internet has had a huge impact on the way people conduct their everyday lives; at work, in the home or even on the move! It also provides fantastic opportunities for individuals and communities that are 'technology enabled'.  </p>
    
    <p> However, not all people in the UK or more noticeably, globally, are 'online' and therefore are not able to take advantage of the great benefits afforded by the 'information age'. There are certain organisations that are trying to bridge the 'gap' though. This eBook will take a critical look at all that has been mentioned above."  </p>
    
    <p> Click next to continue... </p>
    
    </div>
    </div>
    
    <div id="navigation">
    <p><strong>Navigation</strong> </p>
    </div>
    
    <div id="extra">
    <form name="hop">
    <p align="center">
    <select name="choose">
    <option selected value="#">Select a Page</option>
    <option value="#">Page 1</option>
    <option value="#">Page 2</option>
    <option value="#">Page 3</option>
    
    </select>
    <input type="button" onClick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Go"></p>
    </form>
    </div>
    
    <div id="footer"><p>© Ali El Waili</p></div>
    </div>
    
    </body>
    </html>
    Last edited by noobtouch; 02-12-2011 at 11:20 PM.

  • #4
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    added screenshot.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Have a look at this noobtouch. Just copy/paste the entire thing into a new .html and view it in your browser. (It's crap colors, I know... but then I'm no designer anyway.)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.1">
    <style type="text/css">
    html,body{margin:5px;padding:0px}
    body{
    font: 76% arial,sans-serif;
    text-align:center;
    background:#FFFFFF}
    
    
    p{margin:0px 10px 10px}
    a{display:block;color: #981793;padding:10px}
    
    div#header{height:50px;margin:0;padding-left:10px
    ;background:url(images/banner.gif)}
    div#container{text-align:left}
    div#content p{line-height:1.4}
    div#content{ background:#F0F0F0}
    div#navigation{background:#B9CAFF}
    div#extra{background:#F0F0F0}
    div#footer{background:#284C93;color:#F0F0F0}
    div#footer p{margin:0;padding:5px 10px}
    
    div#container{width:1024px;margin:0 auto;border-top-width:thin;border-right-width:1px;
    border-bottom-width:1px;border-left-width:1px;border-top-style:none;border-right-style:solid;
    border-bottom-style:none;border-left-style:solid; border-bottom-color:#b0b0b0;border-left-color:#DEDFDE;
    border-right-color:#b0b0b0;}
    
    div#content{float:left;width:824px;}
    div#extra{float:left;width:824px}
    div#footer{clear:both;width:100%}
    
    /*       Menu Styling        */
    ul#nav {
    	float: right;
    	width: 200px;
    	margin: 0;
    	padding: 0;
    	line-height: 25px;
    	text-align: center;
    }
    	ul#nav li {
    		float: left;
    		margin: 0 auto;
    		padding: 0;
    		position: relative;
    		list-style: none;
    		background: #c93;
    	}
    		ul#nav li a {
    			width: 178px;
    			display: block;
    			border: 1px solid #fff;
    			text-align: center;
    			text-decoration: none;
    			color: #fff;
    			text-shadow: 0.1em 0.1em 0.3em #000;
    		}
    		ul#nav li:hover {background: #cc3;}
    			ul#nav ul {
    				position: absolute;
    				left: -40px;
    				top: 47px;
    				visibility: hidden;
    			}
    				ul#nav li:hover ul {visibility: visible;}
    ul#nav a:hover {color: #666666;}
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="header"></div>
    <div id="wrapper">
    
    <div id="content">
    <p></p>
    <p><strong>Introduction to eBook....</strong> </p>
    <p> The purpose of this eBook is to give you an idea of what life was like at the the start of 21st century. The following pages will allow you to understand in greater detail what life was like for me and for the other 6 billion people who were living on the earth at the same time as me. You will learn about the Internet's capabilities and limitations 100 years ago, the effects that ICT had upon everyday life and the 'gap' that grew between different groups of people which was also known as 'the digital divide'. </p>
    
    <p>From now on step into my shoes, the year is 2010: </p>
    
    <p> "Information communication technology is developing at a phenomenal pace! We are living in an age in which a gigantic amount of information is produced and processed in digital format every second. This information is also able to travel thousands upon thousands of miles in a few moments. </p>
    
    <p> This is done by using different online services that are available on the Internet. The advance of the Internet has had a huge impact on the way people conduct their everyday lives; at work, in the home or even on the move! It also provides fantastic opportunities for individuals and communities that are 'technology enabled'.  </p>
    
    <p> However, not all people in the UK or more noticeably, globally, are 'online' and therefore are not able to take advantage of the great benefits afforded by the 'information age'. There are certain organisations that are trying to bridge the 'gap' though. This eBook will take a critical look at all that has been mentioned above."  </p>
    
    <p> Click next to continue... </p>
    
    </div>
    </div>
                <ul id="nav">
                    <li><a href="#">Navigation</a>
                        <ul>
                            <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>
                            <li><a href="#">Linky</a></li>
                        </ul> 
                    </li> 
                </ul>
    <div id="extra">
    <form name="hop">
    <p align="center">
    <select name="choose">
    <option selected value="#">Select a Page</option>
    <option value="#">Page 1</option>
    <option value="#">Page 2</option>
    <option value="#">Page 3</option>
    
    </select>
    <input type="button" onClick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Go"></p>
    </form>
    </div>
    
    <div id="footer"><p>© Ali El Waili</p></div>
    </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

  • Users who have thanked Excavator for this post:

    noobtouch (02-13-2011)

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Of course, I did that before you put that screenshot up or pointed out what menu you liked off Stu Nichols site so it's different.

    You should get the idea though.
    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

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    edit: SOLVED
    Last edited by noobtouch; 02-13-2011 at 02:41 PM.


  •  

    Posting Permissions

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