HTML - Menus Using Html

Hi All,
I need a html code which deals with cascading menus.
1)For example the page contains 2 menus: Configure,File
2)when I take my mouse over "Configure", it should display submenus "Application","Forms".
3)Again when I take my mouse over "Application" submenu, it should give 2 sub menus "Add" and "View"

I have done till 2 nd point, but stuck up with the 3rd part

can u pls help me....its very urgent....

Regards,
Saras

Hi,

I use the following HTML for a horizontal navbar:

<div align="center">
<p class="navbar" align="center"> |
<a class="navbar" href="index.html">Home</a> |
<a class="navbar" href="events.htm">Events</a> |
<a class="navbar" href="testimonies.htm">Testimonies</a> |
<a class="navbar" href="about.htm">About Us</a> |
<a class="navbar" href="contact.htm">Contact</a> |
</p>
</div>

with this in the style sheet

.navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
text-decoration:none;
color: #ffffff;
background-color:#993300
}
a.navbar:active {
color: #ff00ff;
}

a.navbar:visited {
color: #ffffff;
}
a.navbar:link {
color: #ffffff;
}

a.navbar:hover {
color: #993300;
background-color: #ffffff;
}

But inspecting the code for various web sites it seems that people use the list tag <li>for horizontal menus. However as I can’t see the relevant CSS I don’t understand how it works, and I'm fairly new to CSS anyway (& I got this code from a manual).

Should I be using list tags and how does it link with the style sheet?

If so, can anyone explain what the code should be or point me to a good tutorial on the topic.

Thanks

Hello all,

I need some help coding link menus. These are menus that pop up to the side of links to show additional links.

See this page for what i am looking to achieve.

I want a side menu to show up off of my "Media" link that has link options for Photos, AIM Icons, Riot Act, Submit a Picture, and anything else i need a link option for.

Here is my current code for my link menu to the left:
Code:

<div align="left" style=" "><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0">
<tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://www.niuredriot.com" class="mainlevel style1 style4" id="active_menu">Home</a></font></td></tr></table></tr></table>
<tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0">
<tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://registeruo.niu.edu/iebms/reg/reg_p1_form.aspx?oc=40&ct=STD&eventid=8491" target="_blank" class="mainlevel style1 style4" >Join</a></font></td></tr></table></tr></table>
<tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0">
<tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://www.niuredriot.com/blog/" target="_blank" class="mainlevel style1 style4" >Blog</a></font></td></tr></table></tr></table>
<tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0">
<tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="media.htm" class="mainlevel style1 style4" >Media</a></font></td></tr></table></tr>
<tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0">
<tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="http://www.ncaabbs.com/forums/forumdisplay.php?fid=468" target="_blank" class="mainlevel style1 style4" >NIU Forum</a></font></td></tr></table></tr></table>
<tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0">
<tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="links.htm" class="mainlevel style1 style4" >Links</a></font></td></tr></table></tr></table>
<tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0">
<tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="about.htm" class="mainlevel style1 style4" >About Us</a></font></td></tr></table></tr></table>
<tr><table bordercolor="#990000" width="141" height="15" border="2" cellpadding="0" cellspacing="0">
<tr><td align=center valign="middle" bgcolor="#000000" ><font face="Verdana" size="3"><a href="contact.htm" class="mainlevel style1 style4" >Contact Us</a></font></td></tr></table></tr></table>

Also, for the Submit a Picture page. How would i go about adding some type of form system that submits a picture to an email account?

Thanks!

I am trying to create menu based website for cars, how to I limit a menu to include only the models for a certain make. If ford is selected I want to be able to select mustang, taurus and f150, but not accord, because accord is made by honda.

I am using

Make:
<select name="Make">
<option value="0">Acura</option>
<option value="1">Audi</option>
<option value="3">Bently</option>
<option value="4">Ford</option>
</select>

format to create my menus, any reference to a page explaining how this would be helpful as well as defining (proper terminology) what I am trying to do.

TIA,

James

First off, I have designed one site ever and it's still in progress. I also have no basis in computer training other than graphic design. I am a total beginner, but the site I'm designing is for my personal business, so I'm continually updating it with new features I like.

I was hoping to use hover menus (I have no idea if that is the technically correct term, but when you put your mouse over a link, it gives you a drop down menu) on my site, but really have no clue how to do that. Is it possible in HTML or would I have to use javascript or flash? If so how would I incorporate the code into a generally HTML based site?

Thanks! :-)

This is the code that works than I'm trying to use.. It is a horizontal css popup menu.

Code:

HTML

<div id="menu"> 
<ul id="item1"> 
<li class="top">menu item</li> 
<li class="item"><a href="#">menu item 1</a></li> 
<li class="item"><a href="#">menu item 2</a></li> 
<li class="item"><a href="#">menu item 3</a></li> 
</ul> 
</div>

CSS

#menu ul .item{display:none;}
#menu ul:hover .item{display:block;}
#menu{position:absolute;}

My listing categories/hierarchy is controlled by word press so I can't really control that. I would like to know if I can modify the css to get this working. I'm trying to get the 'children' Appearance category to pop up under Automotive. Here is my NON working code:

Code:

HTML

<div id="dropmenu">
<ul>	
<li class="cat-item cat-item-3"><a href="http://www.diysrc.com/category/automotive/" title="View all posts filed under Automotive">Automotive</a>
<ul class='children'>
<li class="cat-item cat-item-7"><a href="http://www.diysrc.com/category/automotive/appearance/" title="View all posts filed under Appearance">Appearance</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-14"><a href="http://www.diysrc.com/category/featured-articles/" title="View all posts filed under Featured Articles">Featured Articles</a>
</li>
<li class="cat-item cat-item-1"><a href="http://www.diysrc.com/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
</ul>
</div>

CSS

#dropmenu ul .children{display:none;}
#dropmenu ul:hover .children{display:block;}
#dropmenu{position:inline;}

I'm trying to incorporate drop down menus into a template to clean things up a bit but I can't figure out how. Here's the code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Bayside Baptist Church</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<style type="text/css">
<!--
.style1 {font-weight: bold}
.style2 {
color: #94A652;
font-size: 19px;
}
.style5 {font-size: 18px; color: #94A652; }
.style6 {
font-size: 11px
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1>Bayside Baptist Church</h1>
</div>


<div id="nav">
<div id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Ministries</a></li>
<li><a href="index.html">Calendar</a></li>
<li><a href="index.html">Connect</a></li>
<li><a href="index.html">FAQ</a></li>
<li><a href="index.html">Pictures</a></li>
<li><a href="index.html">Contact</a></li>

</div>

</div>

</div>
<div id="headline">
<div id="photo"><div>
<img src="images/pic_1.jpg" width="618" height="254" alt="Pic 1">
</div></div>
<div id="search-news">
<h2 class="downcast">Sermons</h2>
<div id="news-box">
<p class="style1"> 01.11.09</p>
<p><strong>01.04.09</strong></p>
<p><strong>12.28.08</strong></p>
</div>

<h2 class="downcast">News &amp; Events</h2>
<div id="news-box">
<h3><a href="#">12.21.08</a></h3>
<p> Join us at the <strong>Christmas Program</strong> for a time filled with music...</p>
<p class="more"><a href="#">more</a></p>
<h3><a href="#">12.24.08</a></h3>
<p>Come to the <strong>Christmas Eve Candlelight Service</strong> to celebrate...</p>
<p class="more"><a href="#">more</a></p>
</div>
</div>
<div class="clear"></div>
</div>
<div id="body">
<div id="body-left">
<h2 class="style2">Welcome to Bayside</h2>
<p class="style6">Our purpose at Bayside is to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ.* Simply put, we gather in faith, serve in love, and proclaim hope as we love God and love people.* We hope you will join us; we look forward to getting to know you.</p>

<p class="more">&nbsp;</p>
<h2 class="style5">Services</h2>
<img src="images/welcome.gif" alt="" width="150" height="114" class="left" />
<p class="style6">Our <strong>9:15 service</strong> combines contemporary worship music and traditional hymns with a relevant message from Scripture that has real life-changing application to provide a complete worship experience.* We would enjoy having you join us on a regular basis as we seek to encourage one another to live out the truths of the Bible in our daily lives.**</p>
<ul class="plussbullets">
<li><a href="#">Kids Corner</a></li>
<li><a href="#">Teen Studies</a></li>
<li><a href="#">Christian Education Hour</a></li>
</ul>
</div>
<div id="body-right">
<h2 class="style5">Sermon Series</h2>
<p><img src="images/3129504889_fcc5646ba4.jpg" alt="" width="321" height="56" /><span class="style6">Our purpose at Bayside is to help people of all ages experience the fullness of life that God has made available through a personal relationship with Jesus Christ.* Simply put, we gather in faith, serve in love, and proclaim hope as we love God and love people.* We hope you will join us; we look forward to getting to know you.</span></p>
<p>&nbsp;</p>
<p class="more">&nbsp;</p>
<h2 class="style5">Pictures</h2>
<div id="gallery">
<a href="#"><img src="images/gal_1.jpg" width="101" height="96" alt="Gal 1"></a>
<a href="#"><img src="images/gal_2.jpg" width="114" height="96" alt="Gal 2"></a>
<a href="#"><img src="images/gal_3.jpg" width="112" height="96" alt="Gal 3"></a> </div>
</div>
<div class="clear">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
</div>
<div id="footer">
<p>Bayside Baptist Church - 3915 N 16th Street - Superior, Wisconsin 54880 - 715.394.6002</p>
</div>
</body>
</html>


And here's a live sample:

http://www.baysidesuperior.org/Bayside

I'm using Dreamweaver cs3, looked at some tutorials but can't figure it out. What would you guys suggest?

Hi all

I am completely stuck as to what to do here.

I have a drop down list that I want a different html table to display depending on the option chosen on the drop down list.

I know this doesn't make a lot of sense so hopefully this will help...

http://www.penzancepokerleague.co.uk/playerstats.html

Ok, I've managed to get my drop down menu relatively sorted. The final version will have significantly more options, but for editing purposes each only has 2 options right now.

With my limited HTML knowledge, I've managed to get all the boxes lined up left, and in the right order and the such, but there are still a few things I would like this menu to do before it is finished, and I have no idea how to do them. Hopefully someone can help

This is what I have at the moment:

Quote:
<html>
<body>
<div align="left">
<select name="QB">
<option value="QB">Player A - 80</option>
<option value="QB">Player B - 65</option>
</select>
<select name="RB1">
<option value="RB1">Player C - 64</option>
<option value="RB1">Player D - 42</option>
</select>
<select name="RB2">
<option value="RB2">Player C - 64</option>
<option value="RB2">Player D - 42</option>
</select>
<select name="WR1">
<option value="WR1">Player E - 35</option>
<option value="WR1">Player F - 32</option>
</select>
<select name="WR2">
<option value="WR2">Player E - 35</option>
<option value="WR2">Player F - 32</option>
</select>
<select name="TE">
<option value="TE">Player G - 37</option>
<option value="TE">Player H - 29</option>
</select>
<select name="K">
<option value="K">Player I - 20</option>
<option value="K">Player J - 18</option>
</select>
<select name="DST">
<option value="DST">Team A - 35</option>
<option value="DST">Team B - 33</option>
</select>
</div>
</body>
</html>
That does what I want, could be hideously wordy and untidy in the code, idk, but it works lol

What I would like instruction on are the folloing steps if possible:

1) I would like a small box to the left of each drop down menu that remains the same. For example, I'd like a box that says "QB" then to the right of it immediately is the QB drop down menu. A bit like <TH> function works on a table I believe? I just have no idea how to put it into the code so it doesn't throw it all over the place

2) Some positions, like the RB and WR, have 2 positions. However, both drop down box player lists will be the same. Is there any way to stop WR1 and WR2 from being the same player? A player can't be used more than once, so is there a way to make sure the player in each box is never the same?

3) As you can see, each player has a value. At the moment, the player and the value are one constant line of text "Player A - 80". What I'd really like is for this to be split, so that a running team unit total can be kept at the bottom. That way a user will be able to see the total unit value of their team, and it will alter as they alter their line up. I'm sure the player value somehow needs to be its own specific bit of code for this to happen, it can't be coupled with a players name, but I've no idea how to do this either.

I really hope someone can help me out here, would be of great use to me. All I need are some pointers and I'll try and work my way through it as best I can.

Thanks, you guys are great

Hi,

Is there any way to make the "standard" pull down menu that is predefined in html (the pull down form that front page provides) function with links to different pages WITHOUT USING JAVASCRIPT. I am using sharepoint that has security that blocks links that use scripting. Or, is there any way to use this pull down menu with javascript in sharepoint without a popup blocker interviening?

Any help or suggestions much appreciated. thanks,

joe sal

On my site www.BlackberryOS.com/forums/ if you click the 'forums' tab, it shows a drop down menu..What i would like to do is take the headers (in the dark blue) and have those only appear when the tab is clicked. Then if you click on one of the Section names ( ie..Blackberry Devices), once you click that it creates/slides out a side menu that appears with the break down of the section...

Is this possible? A mod/hack for this?

Hi everyone - been reading the forum for some time and have learned so much.

I have a question about drop down menus I am trying to implement on a new hockey website. Basically, I am using the html below. Everything is fine, except with this code, every time an item is selected, it opens in a new window.

How can I alter this code so that selections DO NOT open a new window, and instead just direct readers straight to the desired link?

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"><option> Basic Stats</option><option value="http://wildwood365.blogspot.com">Games</option><option value="http://wildwood365.blogspot.com">Goals</option><option value="http://wildwood365.blogspot.com">Assists</option><option value="http://wildwood365.blogspot.com">Points</option></select>

This is what I'm trying to do.... I have mouseovers set up for the navigation bar and I now want to add a drop down menu to one of the navigation images. I searched the internet and tried fireworks and I couldn't find a solution that worked for me. I can get a regular drop down menu to work but I can't get one to work with a rollover image. I want to set it up like nvidia.com. Does anyone have a solution to my problem?

This is what I have in mind, only I would like it a bit better looking

http://www.dynamicdrive.com/dynamici...lide/index.htm

So basically, a menu thats hidden until you hover over the small part thats visible - then it slides out.


Is it possible to do in jquery or mootools or similar ? I cant code myself so some tutorial would be helpful.

Thanks in advance

Programs
-----------------------
Photoshop CS4
Dreamweaver CS3
-----------------------
Anyways I used photoshop to make most of the site image, slice it up made it to a HTML and images file. I have trouble get text to go in the right place. Im not to sure if im even doing it right. Drop down menu im not sure where to start there.(but mostly having truble with textso any thing will help



( what I need help with. Is how to do text with my work with photoshop. I know how to it with out just not with.)