...

View Full Version : simple collapsable/expandable vertical navigation



noobtouch
02-12-2011, 10:43 PM
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

Excavator
02-12-2011, 10:52 PM
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.

noobtouch
02-12-2011, 11:09 PM
when i edited i must of deleted the whole thing apart from the code.

anyways: http://www.uploadhouse.com/viewfile.php?id=7989296&PHPSESSID=f4fd27dc0201e177f4ee4f6dc6e82988: 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


<!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>

noobtouch
02-12-2011, 11:21 PM
added screenshot.

Excavator
02-12-2011, 11:28 PM
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.)


<!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>

Excavator
02-12-2011, 11:31 PM
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.

noobtouch
02-13-2011, 12:11 PM
edit: SOLVED



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum