Jump to content

How to make a menu?


Recommended Posts

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
Link to comment
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>

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...