Malfunction With Pull-down Multi-level Menu

Jan 24, 2009

I've been asked to create a site for my younger sister and she's requested a horizontal pull-down menu using graphics for the links instead of simply text. This is my first time trying to code such a menu (topic not covered in class) and I'm having some difficulty getting it to work completely.

Right now it's partially working. The various sub menus do show up when clicking or rolling over the previous menu item. However all menu items past the one clicked jump down one line when expanding instead of simply showing the sub menu under the main line up. The rollover also has issues but mostly because I haven't finished coding the onmouseout part, so it doesn't go away. I'm trying to get the main pull down working before tackling that part. Below is the JavaScript function I'm trying to use as well as a part of the menu. I've already spent months trying to get this working and am not making much headway.

[Code]...

View 2 Replies


ADVERTISEMENT

Turn A Single Level Flyout Menu Into A Multi Level One?

Jan 7, 2009

I am trying to turn a single level flyout menu into a multi level one.

It uses a dt for the title, and a ul within the dd for the menu items. The dd opens to the right of the dt.

The problem is that the second level menu (a dl within an li within another dl) [URL] - flyout4 & subflyout5.

The z-index is increased each time. I just can't figure why the area is limited.

javascript, css & html follow -

Code JavaScript:
/** FLYOUT = vertical dropdown **/
var Flyout = {
DDSPEED:10,

[Code].....

View 1 Replies View Related

Change A Single Level Menu To Multi?

Jul 26, 2010

I run an educational website with a CSS/JavaScript based menu that is right now only single level. I am trying to convert it over to multi level. I have tried a few other multi level menus but I have done a lot of customization in terms of appearance for this current menu, so none of the new ones looked right.

Here is the site: [url]
Here is the CSS: [url]
Here is the JavaScript: [url]

View 3 Replies View Related

Multi-Level Menu- Making The Lists Show?

May 26, 2011

I am really pressing on to finish this home page menu, and I'm trying to find out why this odd behavior is occurring. There is obviously some conflicting code in my CSS. You can see this odd behaving menu for yourself at productreview. The other thing I'm trying to learn how to do is how to get the 3rd and 4th level lists to appear on the parent item's hover.This is my JavaScript:

Code:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

[code]....

View 1 Replies View Related

Multi Level Menu - Other Will Close When Click On A Other Main Item

May 19, 2009

I want that when i click on a other main item that the other will close. Now it still keep open and then ill get a long menu list. How do i do it , i dont have js experience.

[Code]...

View 2 Replies View Related

Multi Level Menus

Feb 26, 2006

Can someone direct me to a 3 level menu with the top level being images....

View 4 Replies View Related

JQuery :: Create A Multi Level Query?

Apr 24, 2009

I am trying to create a multi level query,My only problem is that i do not know how i can visually develop it.i would like to have a visual aspect like this one.

<a href="http://yfrog.com/bfpicture6up">http://yfrog.com/bfpicture6up</a>

View 1 Replies View Related

Multi - Level Drop Down Menus In A Tpl File

Aug 11, 2011

I have a website script written in php, now the menu it has is in php and uses a tpl file. This is very crude compared to what i need, now i post here in DHTML because the DHTML drop down menus are more what i need.

Here's the problem. I want to install this for the top navigation bar. It should appear on the whole site. But how do you get a DHTML menu into php script. The current menu is php script, and it is linked in each of the php pages at the bottom. And it needs to have the ability to recognize whether the user is logged in.

View 9 Replies View Related

JQuery :: Multi-level Of Mouseover/mouseout Not Working?

Aug 19, 2010

I am trying to build this page where there are 3 levels of icons/contents. When user hovers on 1st level, they see the 2nd level. They now hovers on the second level and suppossed to get the 3rd levels of contents.My 1st/2nd levels worked fine.But when I added the 3rd level, could not make them to work.Problems: 1. the 2nd levels show up with multiple 3rd level items - suppossed to be all hidden.2. When I hover over the 2nd level - they are like frozen if the 3rd level is displayed. After hiding all the 3rd levels by doing mouseout - when I hover over a 2nd level, 3rd level shows up but when I move over to the next (2nd level), the corresponding 3rd level shows up without hiding the previous one. So again - displays multiple 3rd level items

var cr_event = $('#imgCE');
var info_center = $('#imgIC');
var tab_events = $('#tabCreateEvent');

[code]....

View 3 Replies View Related

Multi-level Return - Doesn't Give Enough Time To Set The Variable

Feb 16, 2010

I'm using ajax to grab a response from a PHP page, on success, the ajax sets a variable. After the line that calls the ajax function is the line the returns the variable (a global variable). Problem is, because the variable is returned right after the ajax function is fired, it doesn't give the ajax enough time to set the variable. The work around I've thought about would be using the ajax function as a variable, and returning that variable in the initial return line.

Here's some code for reference:

The function that will return the response I'm trying to collect:

The ajax code:

View 2 Replies View Related

Vertical Menu - Height Of The Second Level Menu Results In Their Being Gaps In Between Each Menu Item

Jun 3, 2009

The problem is that the height of the second level menu results in their being gaps in between each menu item so that as you move your mouse down the second menu items it quickly closes again. scripting novice fix this by telling me which variable I need to change either in the Java script or the CSS files.

View 2 Replies View Related

Pull Down Menu

Jan 6, 2005

The options in one of my pull down menus link to other sections of the same
page. I've noticed that selecting one of these links opens a new instance of
the entire page instead of just scrolling down to the appropriate section.
How can I make the menu do what I want?

<form name="f1">
<select name="s1" class="hnhjumpbox">
<option value="#">See our Policies...</option>
<option value="#">----------</option>
<option value="#service">Service</option>
<option value="#payment">Payment</option>
<option value="#packing">Packing</option>
<option value="#shipping">Shipping</option>
<option value="#returns">Returns</option>
</select>&nbsp;<input type="button" name="test" class="hnhjumpboxbutton"
value="Go" title="Select a link from the drop-down menu first!"
onClick="location=document.f1.s1.options[document.f1.s1.selectedIndex].value
;"></form>

For instance, I have an anchor at the Payment section. When I select the
Payment link from the pull down menu, a new instance of the page opens and
then jumps down to the Payment section. I want it to jump down to the
payment section without opening a new page.

View 4 Replies View Related

Create Pull Down Menu?

Feb 27, 2009

I am creating a simple/static web site where i need to create pull down menu.

I am wondering how i can achieve it.

View 2 Replies View Related

Add 3rd Level To Vertical Menu?

May 3, 2010

I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction? [URL]

View 2 Replies View Related

Load Pull Down Menu On JSP Page

Jul 23, 2005

I am new to Javascript and I am having problems with loading a pull
down menu.

I get this error:
javax.servlet.ServletException: No data found

It will list the items just fine if I just list the items without
using the select & option tags. I would like to know why I am getting
an error with the following statement:

<select size="1" name="org">
<% while (rs.next()) { %>
<option value="<%=rs.getString("ORG_CODE")%>">
<%=rs.getString("ORG_CODE")%>
</option>
<% } %>
</select>

View 7 Replies View Related

Dynamic Pull Down Menu Calculator

Sep 9, 2010

I have a client who requires a dynamic pull down menu (chained Select Menu) and also requires that it does a basic price estimation based on the selected options from the menus. I have been toying around with Xin Yang Chained Select Menu(Sample A1) as well as a randomly found javascript calculator(sample A2) I found through google search. When trying to combine the two the calculator becomes broken.

Sample A1
Code:
Sample A2
<html>
<head>
<title>Calculate Amount</title>
<script language="JavaScript">
function calcAmount(){
var oprice = parseFloat(document.getElementById("oprice").value );
var sprices = document.getElementById("sprice");
var sprice = parseFloat(sprices[sprices.selectedIndex].value);
var qties = document.getElementById("qty");
var qty = parseInt(qties[qties.selectedIndex].value);
var tot = document.getElementById("tot");
tot.value = (oprice + sprice) * qty;
}
</script>
</head>
<body>
<h3>Total Amount = (OpenPrice + SetPrice) * Quantity</h3>
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td>Open Price:</td>
<td><input style="width:100;text-align:right" type="text" id="oprice" value="0">$</td>
</tr><tr>
<td>Set Price:</td>
<td><select style="width:100" id="sprice">
<option value="100">100 </option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>$
</td></tr><tr>
<td>Quantity:</td>
<td><select style="width:100" id="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="100">100</option>
</select>
</td></tr><tr>
<td colspan="2"><hr></td>
</tr><tr>
<td><input type="button" value="Total Amount" onclick="calcAmount()"></td>
<td><input style="width:100;text-align:right" type="text" value="0" id="tot">$</td>
</tr>
</table>
</body>
</html>

View 2 Replies View Related

Function Not Working With Pull Down Menu?

Mar 28, 2010

I have an function that shoud be activated when the pull down menu in triggerd, the if functions is corresponding to the same menu overig_eenh[]

[Code]...

View 5 Replies View Related

AJAX 2-level Menu Maker

Feb 13, 2007

Tested in IE6 and Firefox. Hover on main menu items, sub-items are displayed. Main menu items are not required to have sub items.

MenuTree.xml

<?xml version="1.0" ?>
<menu>
<main>
<text>First</text>
<sub>
<text>Anything</text>
<link>links/anything.html</link>
</sub>
<sub>
<text>Everything</text>
<link>links/everything.html</link>
</sub>
<sub>
<text>Nothing</text>
<link>links/nothing.html</link>
</sub>
</main>
<main>
<text>Second</text>
<link>links/apples.html</link>
</main>
<main>
<text>Third</text>
<sub>
<text>Something</text>
<link>links/something.html</link>
</sub>
</main>
<main>
<text>Fourth</text>
<link>links/oranges.html</link>
</main>
</menu>



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var response = "";
var nContainer = "";
var mainItemsText = [];
var mainItemsLink = [];
var subItemsText = [];
var subItemsLink = [];
var mainItemsWithSubs = [];
var IE = true;
if (navigator.appName != "Microsoft Internet Explorer"){IE = false}

function hideSubs(nMain){

var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = 'none'
}
}

function showSubs(nMain){

var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = ''
}
}

function setHoverDisplay(){

if (IE)
{
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]].onmouseout = function(){hideSubs(this)}
}
}
}
else {
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]+1].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseout = function(){hideSubs(this)}
}
}
}
}

function buildMenu(){

nContainer = document.getElementById('menuContainer');
mainItemsWithSubs = [];
var n = 0;
for (i=0; i<mainItemsText.length; i++)
{
var nItem = document.createElement('dt');
var nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(mainItemsText[i]));
if (mainItemsLink[i] != undefined)
{
nLink.setAttribute('href',mainItemsLink[i]);
}
else{
nLink.setAttribute('href',"#");
nLink.onclick = function(){return false;}
mainItemsWithSubs[n++] = i;
}
nContainer.appendChild(nItem);
}
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (s=0; s<subItemsText[i].length; s++)
{
nItem = document.createElement('dd');
nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(subItemsText[i][s]));
nLink.setAttribute('href',subItemsLink[i][s]);
if (IE){nContainer.childNodes[mainItemsWithSubs[i]].appendChild(nItem)}
else {nContainer.childNodes[mainItemsWithSubs[i]+1].appendChild(nItem)}
}
}
setHoverDisplay();
}

function parseResponse(){

var n = 0;
var s = 0;
var mainItems = response.getElementsByTagName('main');
if (IE)
{
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].firstChild.text;
if (mainItems[i].childNodes[1].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[1].text;
}
n++;
}
}
else {
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].childNodes[1].firstChild.data;
if (mainItems[i].childNodes[3].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[3].firstChild.data;
}
n++;
}
}
for (i=0; i<mainItems.length; i++)
{
if (IE && mainItems[i].childNodes[1].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
for (n=0; n<mainItems[i].getElementsByTagName('sub').length; n++)
{
subItemsText[s][n] = mainItems[i].childNodes[n+1].childNodes[0].text;
subItemsLink[s][n] = mainItems[i].childNodes[n+1].childNodes[1].text;
}
s++;
}
if (!IE && mainItems[i].childNodes[3].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
var subs = mainItems[i].getElementsByTagName('sub');
for (n=0; n<subs.length; n++)
{
subItemsText[s][n] = subs[n].childNodes[1].firstChild.data;
subItemsLink[s][n] = subs[n].childNodes[3].firstChild.data;
}
s++;
}
}
buildMenu();
}

function getMenuTree(){

var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
response = request.responseXML;
parseResponse();
}
else {alert('Error MenuTree.xml '+ request.statusText)}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
request.open("GET", "MenuTree.xml"+forceGET, true);
request.send(null);
}

onload=getMenuTree;

</script>
<style type="text/css">

dt {background-color:#b0c4de;text-indent:5px}
dd {background-color:#87ceeb}
a {color:#00008b}

</style>
</head>
<body>

<div id='menuContainer' style='border:1px solid black;background-color:#afeeee;height:200px;width:150px;font-size:12pt;padding:5px;overflow:auto;font-family:arial;font-weight:bold;line-height:140%'>
</div>

</body>
</html>

View 6 Replies View Related

How To Fire Onchange Event Of A Pull Down Menu

Sep 23, 2006

Anybody has any idea on how to fire onchange event of a pulldown menu
with script.

I need to trigger it so it when i select a certain option from script,the event handler is executed.

View 1 Replies View Related

JQuery :: Pull Down Menu That Modifies A Search Box?

Aug 15, 2011

I've managed to use a few pieces (Fancybox, Active Tabs)

I've been tasked with creating a pull down menu that modifies a search box. Very similar actually to the type of search you see on the top left of the jQuery Plugins page:

[URL]

So I need a pull down menu with multiple options that restrict the search box to only to search the selected option.

I don't understand the relation between the two boxes and how to pass the first option to the search box. Is there an existing plugin for this? Or a tutorial that someone can point me to? Or if the answer is, "Go read this book first" I'm happy to read that book.

View 2 Replies View Related

Superfish: Automatically Expand 3rd-level Menu

Mar 19, 2009

I have a 3-level menu using JQuery-Superfish. I would like to hover over the top-level menu item and have BOTH the 2nd and 3rd-level menus open automatically.

View 1 Replies View Related

2 Level Horizontal Menu - Convert It To Onclick

Sep 16, 2009

I have a working code of 2 level horizontal tab menu....it is now onmouse over ,I want to convert it to onclick. I have taken from....

Code:
var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
[Code]...

View 4 Replies View Related

JQuery :: Simple Hover Over Drop Down Menu One Level?

Sep 24, 2010

Well I have used this same script a few times, but this time I am having an issue, When I hover the text the drop down shows, as soon as I try to hover the drop down it will disappear.I am also trying to make the background stick on main text (hover text) untl the mouse moves off. Been stuck on this for hours.Here is my HTML

<div class="header-nav">
<ul id="navigation">
<li><a href="">home</a></li>

[code].....

View 1 Replies View Related

JQuery :: Superfish Menu Disable Link At Top Level?

May 16, 2011

I have inherited a site with superfish used as the menu which seems to work fine except that I wish to disable the links at the top level so that a click on the top level of the menu goes nowhere only clicks on the sub menu list. At the moment each top level menu item is a section and the sub menu list categories. There is nothing I need or want to place in the Section heading so a link from this is unnecessary but at the moment clicking on the top level (section) leads to a page i do not want.Example:-Top Level Section (no link to anywhere)2nd level Category 1 (link to article)3rd level Category 2 (link to article)etc.

Is this possible to do. I feel sure it should be as it is a normal facility on a drop down menu but I cannot find anywhere in the options which enables this. I am not sufficiently conversant with CSS to try playing with the current layout which other than this seems to be working ok.

View 1 Replies View Related

JQuery :: Hover (Top Level Menu) Not Working In Mozilla Firefox

Oct 29, 2010

I have implemented a jQuery hover top level menu & it is working fine in bothIE 7& 8. However, when I am executing the same code in Mozilla Firefox, it is not rendering hover effect at all. Also, I am adding a <span> using jQuery if JavaScript isn't enabled. This span is also not getting added in Mozilla.

Following is the code that I am using.
<script type="text/javascript" src="[URL]"></script>
<script>
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.pnode li a").mouseover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>

I came to know that IE & Mozilla see .parent differently.I have tried everything but not able to get this stuff working in Mozilla. I am using Firefox 3.5.5 version.

View 4 Replies View Related

JQuery :: Superfish: Top Level Navigation Menu Prints As A List

Jul 11, 2011

I have implemented Superfish in SAP Portal. there is a small issue when I take a print using the browser's print option. When I try printing the Web Page from the browser, the Top Level Navigation Menu appears as a list of links (vertical). This is happening in both IE as well as Firefox.

I have seen the same issue in the website from where I downloaded Superfish :-|

1. Goto: [URL]

2. Click on 'Print Preview' button in your Browser.

3. The Superfish Menu below the text 'The result:' will appear as a list of links in the print preview.

View 6 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved