I need to know how to make a Menu

@XxMaNtiSaixXJul 21.2005

I want a Menu that sits on the left side of my site with a scroll bar, a place where I can just place links and let someone scroll down the list.

to post a comment

HTML

17 Comments(s) _↴

@the_treeJul 21.2005 — #Think of your menu as an unordered list of links, and mark it up as so. For the scroll bar, you'll want to use the [i]overflow: auto[/i] property.

Here's a painfully simple example.

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>
 Page with menu
 </title>
 <style type="text/css">
 <!--
 body{
 background-color: #fff;
 padding: 0;
 font-size: 15px;
 font-family: arial, sans;
 
 }
 a{
 color: #00f;
 text-decoration: none;
 }
 a:hover{
 text-decoration: underline;
 }
 #menu,#content{
 border: 1px solid #ccc;
 padding: 0;
 margin: 0;
 position: absolute;
 top: 30px;
 height: 200px;
 max-height: 200px;
 overflow: auto;
 }
 #content{
 width: 500px;
 left: 170px;
 }
 #menu{
 left: 10px;
 width: 150px;
 list-style-type: none;
 }
 #menu li{
 width: 130px;
 padding: 0;
 margin: 0;
 }
 #menu li a{
 display: block;
 width: 100%;
 background-color: #eee;
 border-bottom: 1px solid #bbb;
 padding: 2px;
 text-decoration: none;
 color: #000;
 }
 #menu li a:hover{
 background-color: #fff;
 }
 -->
 </style>
 </head>
 <body>
 <div id="content">
 <h1>
 This Page has a menu
 </h1>
 <p>
 Lorem ipsum dolor sit amet, consectetuer <a href=
 "#">adipiscing elit</a>. Quisque lacinia wisi. Class
 aptent taciti sociosqu ad litora torquent per conubia
 nostra, per inceptos hymenaeos.
 </p>
 <p>
 Etiam feugiat, metus molestie rutrum egestas, diam sem
 dignissim sem, at bibendum turpis ligula aliquet nulla.
 Mauris velit. Maecenas eu justo. Suspendisse at dui.
 </p>
 <p>
 Aliquam est arcu, dictum nec, nonummy vel, pharetra eget,
 nunc. Ut cursus fermentum <a href="#">risus</a>. Nunc
 volutpat ornare lorem. Nulla luctus nibh ut diam. Aliquam
 in nunc.
 </p>
 </div>
 <ul id="menu">
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 <li>
 <a href="#">Menu item</a>
 </li>
 </ul>
 </body>
 </html>[/code]

@XxMaNtiSaixXauthorJul 23.2005 — #Thanks for the code but now I have another problem, I have a banner GIF on my website, I can't move the Menu and the scroll msg box down to where I want to move them. What do i change to move them around? Their both overlapping my welcome banner.

@XxMaNtiSaixXauthorJul 24.2005 — #A little help please?

@KravvitzJul 24.2005 — #I would have used floats instead of absolute positioning. Anyway, in this case, you need to change the value of the top property.

#menu,#content{
 border: 1px solid #ccc;
 padding: 0;
 margin: 0;
 position: absolute;
 top: [b]30[/b]px;
 height: 200px;
 max-height: 200px;
 overflow: auto;
 }

@KravvitzJul 27.2005 — #Can you send me this floats script please? I wanna compare and see which one I like more.[/QUOTE]

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;&lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;title&gt;Two column layout&lt;/title&gt;
 &lt;style type="text/css"&gt;
 body,div,table,td,th,a,p,h1,h2,h3,h4,textarea,input {
 font-family: verdana,tahoma,arial,helvetica,sans-serif;
 font-size: 100%;
 }
 body {
 margin:0
 background-color: #fff;
 padding: 10px;
 font-size: 85%;
 }
 a {
 color: #00f;
 text-decoration: underline;
 }
 a:hover {
 text-decoration: none;
 }
 #menu,#content {
 border: 1px solid #ccc;
 padding: 0;
 margin: 0;
 position: relative;
 min-height: 200px;
 overflow: visible;
 }
 #content {
 margin-left: 160px;
 }
 #menu {
 float: left;
 width: 150px;
 }
 #menu,#menu li {
 list-style-type: none;
 padding: 0;
 margin: 0;
 }
 #menu li a {
 display: block;
 background-color: #eee;
 border-bottom: 1px solid #bbb;
 padding: .2em .8em;
 text-decoration: none;
 color: #000;
 }
 #menu li a:hover {
 background-color: #fff;
 }
 /* hide from IE/Mac */
 * html #menu,* html #content {
 height: 200px;
 }
 * html #menu li a {
 width: 100%;
 }
 /* end hide */
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;ul id="menu"&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;a href="#"&gt;Menu item&lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;div id="content"&gt;
 &lt;h1&gt;
 This Page has a menu
 &lt;/h1&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet, consectetuer &lt;a href=
 "#"&gt;adipiscing elit&lt;/a&gt;. Quisque lacinia wisi. Class
 aptent taciti sociosqu ad litora torquent per conubia
 nostra, per inceptos hymenaeos.
 &lt;/p&gt;
 &lt;p&gt;
 Etiam feugiat, metus molestie rutrum egestas, diam sem
 dignissim sem, at bibendum turpis ligula aliquet nulla.
 Mauris velit. Maecenas eu justo. Suspendisse at dui.
 &lt;/p&gt;
 &lt;p&gt;
 Aliquam est arcu, dictum nec, nonummy vel, pharetra eget,
 nunc. Ut cursus fermentum &lt;a href="#"&gt;risus&lt;/a&gt;. Nunc
 volutpat ornare lorem. Nulla luctus nibh ut diam. Aliquam
 in nunc.
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@XxMaNtiSaixXauthorJul 27.2005 — #thats perfect, thanks a ton!

@KravvitzJul 27.2005 — #You're welcome ?

@terry81Jul 27.2005 — #Hi..just wondering..if I need to add a CGI form inside the main screen, am i supposed to do it just normally?

btw, will all browsers support this feature that u provided? Is it call iframe or layer (seem like layer to me)? not very sure about those stuff ?

@KravvitzJul 27.2005 — #I'm not sure what you are asking.

The two layouts shown in this thread should look ok in IE5+/Win, Firefox, Netscape 6+, Opera 7+, Konqueror 3, and Safari.

Some people refer to absolute positioning, which was used in the_tree's version of the layout, as layers.

@XxMaNtiSaixXauthorJul 28.2005 — #There is one more tweak I could use help with..... Where the "content" message box thing is off to the right, is it possible to make it so when you click a link on the menu the page opens up where that is? and leaves the menu on the left? That way I don't have to code EVERY page on my site with the menu code.

@KravvitzJul 28.2005 — #Use [url=http://www.php.net/manual/en/function.include.php]PHP includes[/url] or [url=http://httpd.apache.org/docs/howto/ssi.html]SSI[/url].

@XxMaNtiSaixXauthorJul 29.2005 — #I found a use for having the code on every page so I'm good now.

@XxMaNtiSaixXauthorJul 30.2005 — #Can someone tell me how to give the text field to the right a black background? I've been messing with it for a while and can't seem to quite get it. I'm using the code Kravvitz supplied.

@NogDogJul 30.2005 — #

<i>
 </i>#content {
 margin-left: 160px;
 background-color: black;
 color: white;
 padding: 10px;
 }

@KravvitzJul 30.2005 — #Oh... Angelfire -- you probably can't use PHP or SSI then, but you can use [url=http://www.angelfire.lycos.com/build/cgi/index.tmpl]CGI/PERL[/url].

http://www.the-labs.com/InlinePerlPages/#syntax

You could use frames to do what you want but you should read the following page first. [url=http://help.lycos.com/angelfire/a_q_10_3.asp]Why Angelfire users shouldn't use frames.[/url]

Hex Color Notation is better for cross-browser support.

#content {
 margin-left: 160px;
 background-color: #000000;
 color: #ffffff;
 padding: 10px;
 }

@terry81Aug 05.2005 — #I'm not sure what you are asking.

The two layouts shown in this thread should look ok in IE5+/Win, Firefox, Netscape 6+, Opera 7+, Konqueror 3, and Safari.

Some people refer to absolute positioning, which was used in the_tree's version of the layout, as layers.[/QUOTE]

so is this considered HTML CSS scripting ?? coz the coding looks like CSS lol...i m not sure exactly...

although from whaT i see after using it on my design, it seem to use layers and then using pixel positiong to ensure that the layers acting as frame dont move around? i need to write a reprt on the coding i m using to create this so can u advise how sld i call this method of coding? ?

@KravvitzAug 05.2005 — #Scripting is not the right word. HTML is a markup language (that's what the ML mean). I'm not sure what the kind of language that CSS is is called.

The two layouts here are tableless layouts. They use CSS to specify how it should look and separate presentation from content.

I prefer using floats because they are more flexible than absolute positioning.

Also in #HTML _↴

How to call menu text from external file?Help with Put up Movies & Animated giffs Vertical text jquery slider

Success!

Help @XxMaNtiSaixX spread the word by sharing this article on Twitter...

Tweet This

I need to know how to make a Menu

17 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

I need to know how to make a Menu

17 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #HTML _↴