Printable View
I have develop an page in which i had little issue related to drop down menu.At the top of the page i have set my navigation menu bar. I'd like to add sub menus to 2 of the tabs (portfolio and pricing). I've been searching for hours online for CSS coding to do this. But it's all greek to me. On the portfolio tab I'd like to add 12 sub menus and the pricing tab I'd like to add 3 sub menus.
Thank you!
I search on the net for your requirement and got the following please go through it.
Dropdowns are one of those web page techniques that can be done easily -- and incorrectly -- or with just a little extra effort and correctly. The technique described here is quite simple. We've written all the Javascript code, so mostly you'll only need to do a little copying and pasting.
First, copy this Javascript and paste it exactly as is into the <HEAD> section of your document:
Now we create a <SELECT ...> list of pages. The following code creates the form and the select list. Copy most of this code exactly as it is. The only part to modify for your own page is the list of URL options grouped together in the middle:Code:<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>
HTML Code:<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Choose a Destination...
<OPTION VALUE="/tags/" >Guide to HTML
<OPTION VALUE="/" >Idocs Home Page
<OPTION VALUE="http://www.ninthwonder.com" >Ninth Wonder
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
HTML Code
HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.
Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:
HTML Code:<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>
Here you can have the simple code for your Drop down menu, write it in the notepad file change its extension to .html file and run on the browser.
HTML Code:<form name="form2" id="form2"action="" >
<select name="select2" size="1">
<option value="none" selected="selected">
Select a page and go
<option value="alertsText.htm">
Text Alerts
<option value="alertsImages.htm">
Alerts with images
<option value="alerts.htm">
Message Boxes
<input type="button" name="B2" id="B2" value="Go to Article ..." onclick="goToPage2()" />
</form>