Jump to content
Chaosdruid

How to make a menu?

Recommended Posts

I've been using html for about a month now but I still can't seem to figure out how to add a menu on the left side of the page. But I still want to be able to write beside it. Please help me.

Share this post


Link to post
Share on other sites

HI,Please look at the following code taken from the w3schools.com which would tell you how you can do this. You have to do it programatically. There is no tag as such to achieve this as far as my knowledge goes.Thnx,Bhushan.

<html><head><style>body{font-family:arial;}table{background:black;position:absolute;}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightgreen}table.topnav{font-size:80%;top:0;left:0}table.menu{font-size:100%;bottom:0;z-index:-1}</style><script type="text/javascript">var i=0var c=0var intHidefunction show_hide_menu(){if (c==0)	{	clearInterval(intHide)	intShow=setInterval("show()",10)	c=1	}else	{	clearInterval(intShow)	intHide=setInterval("hide()",10)	c=0	}}function show(){if (i>-100)	{	i=i-1	document.all("menu").style.bottom=i	}}function hide(){if (i<0)	{	i=i+1	document.all("menu").style.bottom=i	}}</script></head><body><table class="topnav" width="150"><tr><td bgcolor="#FF0000" onclick="show_hide_menu()"><b>MENU</b><br /><table class="menu" id="menu" width="100%"><tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr><tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr><tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr><tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr><tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr></table></td></tr></table><p>Click on the MENU to see the menu options.</p></body></html>

I've been using html for about a month now but I still can't seem to figure out how to add a menu on the left side of the page. But I still want to be able to write beside it. Please help me.

[edit]: wrapped code in codebox - skemcin

Share this post


Link to post
Share on other sites

You can do this with tables (although not suggested) or with CSS div's. Here is an example, or if you want more information/explanation, check out this:http://www.w3schools.com/css/css_classification.asp specifically the example Creating a Homepage without Tables

<html><head><style type="text/css">div.container{width:100%;margin:0px;border:1px solid gray;line-height:150%;}div.header{padding:0.5em;color:white;background-color:gray;clear:left;}h1.header{padding:0;margin:0;}div.left{float:left;width:160px;margin:0;padding:1em;}div.content{margin-left:190px;border-left:1px solid gray;padding:1em;}</style></head><body><div class="container"><div class="header"><h1 class="header">W3Schools.com</h1></div><div class="left"><p>MENU will be placed here between this div</p></div><div class="content"><h2>Text goes here!</h2><p>Enter content of site here!!!!</p></div></div></body></html>

Share this post


Link to post
Share on other sites

You may have to change you file name from index.html to index.shtml then you can include your menu.html page in any file....if you dont want to change the extension of file then use the javascript...1. Create an external javascript file on notepad by typing..

document.write("<a href=your-location>Menu1</a><br>");document.write("<a href=your-location>Menu2</a><br>");document.write("<a href=your-location>Menu3</a><br>");document.write("<a href=your-location>Menu4</a><br>");

2. Now save it as your-file-name.js3. Include it in html page anywhere by typing

<script type=text/javascript src="your-file-name.js"></script>

That is a sample.. you can make changes to script.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...