Welcome to WebmasterWorld Guest from 34.207.152.62

Forum Moderators: open

Message Too Old, No Replies

expandable menus

expandable menus

     
12:00 pm on Jun 28, 2007 (gmt 0)

New User

10+ Year Member

joined:June 28, 2007
posts:8
votes: 0


Need help is creating the following Expandable Menu with close when another link is selected

ABOUT US

ØHistory
ØVision
ØLogo
ØManagement
ØAcademics
ØEvaluation

ADMISSIONS

SPECIALS

SCHOOL LIFE

ØSports program
ØMega events
ØRegular events
ØStudents council
ØSchool band
ØSpecial days

FACILITIES

ØSports
ØCounsellor
ØCampus
ØLibrary
ØResource Centre
ØMultimedia room
ØOther services

STUDENT’S SPACE

ØStudent contributions

GRAFFITI

ØForm

CONTACT US

ØParents
ØEx-students
ØOthers

1:24 pm on June 28, 2007 (gmt 0)

New User

10+ Year Member

joined:June 28, 2007
posts:8
votes: 0


Have modified the following , How do I auto close the menus when another is selected?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Expand menu</title>
<script type="text/javascript">
function gogirl(e) {
if (document.getElementById(e).style.display == 'none') {
document.getElementById(e).style.display = 'block';
} else {
document.getElementById(e).style.display = 'none';
}
}

function hideall() {
var Nodes = document.getElementsByTagName('ul')
var max = Nodes.length
for(var i = 0;i < max;i++) {
var nodeObj = Nodes.item(i)
nodeObj.style.display = 'none';
}
}
</script>

<style type="text/css">
body {
font:12px/20px verdana;
margin: 10px;
padding: 0;
}
a {
color: #FF380C;
text-decoration: none;
font-weight: normal;

}
a:hover {
color: black;
text-decoration: none;
border-bottom: dotted 0px #d0cc00;
}
ul {
list-style: none;
margin :0px 0px 0px 15px;
padding-left: 5px;
border-left: 1px dotted #000;
}
h4{
font:11px verdana;
cursor: hand;
margin: 2px 0px;
padding: 2px;
color: #FF380C;
background-color: white;
border: 1px solid #000;
font-weight : bold;
width: 95px;
}
</style>

</head>

<body onload="hideall();">

<h4 ><a href="index.htm">Home</a></h4>


<h4 onclick="gogirl('list2')">About Us</h4>
<ul id="list2">
<li><a href="index.php?page=1">History</a></li>
<li><a href="index.php?page=2">Vision</a></li>
<li><a href="index.php?page=3">Logo</a></li>
<li><a href="index.php?page=1">Management</a></li>
<li><a href="index.php?page=2">Academics</a></li>
<li><a href="index.php?page=3">Evaluation</a></li>
</ul>

<h4 ><a href="index.htm">Admissions</a></h4>

<h4 ><a href="index.htm">Specials</a></h4>


<h4 onclick="gogirl('list5')">School Life</h4>
<ul id="list5">
<li><a href="index.php?page=1">Sports Program</a></li>
<li><a href="index.php?page=2">Mega Events</a></li>
<li><a href="index.php?page=3">Regular Events</a></li>
<li><a href="index.php?page=1">Students Council</a></li>
<li><a href="index.php?page=2">School Band</a></li>
<li><a href="index.php?page=3">Special Days</a></li>
</ul>

<h4 onclick="gogirl('list6')">Facilities</h4>
<ul id="list6">
<li><a href="index.php?page=1">Sports</a></li>
<li><a href="index.php?page=2">Counsellor</a></li>
<li><a href="index.php?page=3">Campus</a></li>
<li><a href="index.php?page=1">Library</a></li>
<li><a href="index.php?page=2">Resource centre</a></li>
<li><a href="index.php?page=3">Other Services</a></li>
</ul>

<h4 onclick="gogirl('list7')">Students Page</h4>
<ul id="list7">
<li><a href="index.php?page=1">Student Contributions</a></li>
</ul>

<h4 ><a href="index.htm">Photo Gallery</a></h4>


<h4 ><a href="index.htm">Graffiti</a></h4>


<h4 onclick="gogirl('list10')">Contact Us</h4>
<ul id="list10">
<li><a href="index.php?page=1">Parents</a></li>
<li><a href="index.php?page=2">Ex-Students</a></li>
<li><a href="index.php?page=3">Enquiry</a></li>
</ul>

</body>
</html>

3:16 pm on June 28, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts: 2278
votes: 77


Maybe some variation on this:

function hideall(){
for (count=1; count<4; count+=1) // set "count" to one more than the total links
document.getElementById('ID'+count).style.display='none';
}

All elements share the same root ID plus one digit: ID1, ID2, etc.

Best I can do, but I know it works.

Marshall

4:47 am on June 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 28, 2007
posts: 8
votes: 0


Thansk marshall,

Got it to work, Only problem now is that i need to insert the arrow pics for the links that expand and another pic for the ones that dont. How do I do this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Expand menu</title>
<script type="text/javascript">
function gogirl(e) {
if (document.getElementById(e).style.display == 'none') {
document.getElementById(e).style.display = 'block';
} else {
document.getElementById(e).style.display = 'none';
}
}

function hideall() {
var Nodes = document.getElementsByTagName('ul')
var max = Nodes.length
for(var i = 0;i < max;i++) {
var nodeObj = Nodes.item(i)
nodeObj.style.display = 'none';
}
}
</script>

<style type="text/css">
body {
font:12px/20px verdana;
margin: 10px;
padding: 0;
}
a {
color: #FF380C;
text-decoration: none;
font-weight: normal;

}
a:hover {
color: black;
text-decoration: none;
border-bottom: dotted 0px #d0cc00;
}
ul {
list-style: none;
margin :0px 0px 0px 15px;
padding-left: 5px;
border-left: 1px dotted #000;
}
h4{
font:12px verdana;
cursor: hand;
margin: 2px 0px;
padding: 2px;
color: #FF380C;
background-color: white;
border: 0px solid #000;
font-weight : normal;
width: 95px;
}
h4:hover {
color: black;
text-decoration: none;
border-bottom: dotted 0px #d0cc00;
}
</style>

</head>

<body onload="hideall();">

<h4 ><a href="index.htm">Home</a></h4>

<h4 onclick="hideall();gogirl('list2')">+About Us</h4>
<ul id="list2">
<li><a href="index.php?page=1">History</a></li>
<li><a href="index.php?page=2">Vision</a></li>
<li><a href="index.php?page=3">Logo</a></li>
<li><a href="index.php?page=1">Management</a></li>
<li><a href="index.php?page=2">Academics</a></li>
<li><a href="index.php?page=3">Evaluation</a></li>
</ul>

<h4 ><a href="index.htm">Admissions</a></h4>

<h4 ><a href="index.htm">Specials</a></h4>

<h4 onclick="hideall();gogirl('list5')">School Life</h4>
<ul id="list5">
<li><a href="index.php?page=1">Sports Program</a></li>
<li><a href="index.php?page=2">Mega Events</a></li>
<li><a href="index.php?page=3">Regular Events</a></li>
<li><a href="index.php?page=1">Students Council</a></li>
<li><a href="index.php?page=2">School Band</a></li>
<li><a href="index.php?page=3">Special Days</a></li>
</ul>

<h4 onclick="hideall();gogirl('list6')">Facilities</h4>
<ul id="list6">
<li><a href="index.php?page=1">Sports</a></li>
<li><a href="index.php?page=2">Counsellor</a></li>
<li><a href="index.php?page=3">Campus</a></li>
<li><a href="index.php?page=1">Library</a></li>
<li><a href="index.php?page=2">Resource centre</a></li>
<li><a href="index.php?page=3">Other Services</a></li>
</ul>

<h4 onclick="hideall();gogirl('list7')">Students Page</h4>
<ul id="list7">
<li><a href="index.php?page=1">Student Contributions</a></li>
</ul>

<h4 ><a href="index.htm">Photo Gallery</a></h4>

<h4 ><a href="index.htm">Graffiti</a></h4>

<h4 onclick="hideall();gogirl('list10')">Contact Us</h4>
<ul id="list10">
<li><a href="index.php?page=1">Parents</a></li>
<li><a href="index.php?page=2">Ex-Students</a></li>
<li><a href="index.php?page=3">Enquiry</a></li>
</ul>

</body>
</html>

6:12 am on June 29, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2278
votes: 77


Would it just be easiest to put this character by the word: ±

&plusmn;

Marshall

6:23 am on June 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 28, 2007
posts: 8
votes: 0


It Doesnt look neat man,
plus The hover effect doesnt seem to be working in IE 6 but works in IE7

Im new to this and any help will do

6:32 am on June 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 28, 2007
posts: 8
votes: 0


How do I change the + to - when the menu is open?
7:22 am on June 29, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2278
votes: 77


systemh,

This is a fixed plus/minus sign and does not change. I use it often as it is, at times, easier than coding in the change you describe. I do have that effect somewhere in my script "library," but I have to find it.

Marshall

11:03 am on June 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 28, 2007
posts:8
votes: 0


hope you can find it for me,

Having problems displaying the hover effects in IE6 but it seems ok IN IE7, Any idea why?

11:20 am on June 29, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2278
votes: 77


Sent you a sticky
11:37 am on June 29, 2007 (gmt 0)

New User

10+ Year Member

joined:June 28, 2007
posts:8
votes: 0


thanks buddy
12:08 pm on July 5, 2007 (gmt 0)

New User

10+ Year Member

joined:June 28, 2007
posts: 8
votes: 0


Need help in the below javascript, I think.

All the links seem to work now except that after clicking on a submenu link ( About Us - History)how do I get keep the status of the link as active(About Us) once it opens on a new page? I mean keeping the font color to black n bold?
<body onload="hideall();gogirl('list2')">
Using the above I can keep the submenu opens but cant highlight the corresponding menu link i.e keep the font color to black for About Us

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Expand menu</title>
<script type="text/javascript">
function gogirl(e) {
if (document.getElementById(e).style.display == 'none') {
document.getElementById(e).style.display = 'block';
} else {
document.getElementById(e).style.display = 'none';
}
}

function hideall() {
var Nodes = document.getElementsByTagName('ul')
var max = Nodes.length
for(var i = 0;i < max;i++) {
var nodeObj = Nodes.item(i)
nodeObj.style.display = 'none';
}
}
</script>

<style type="text/css">
body {
font:12px/20px verdana;
margin: 10px;
padding: 0;
}

a {
color: #FF380C;
text-decoration: none;
font-weight: normal;

}
a:hover , a:active{
color: black;
text-decoration: none;
font-weight: bold;

}

ul {
list-style: none;
margin :0px 0px 0px 15px;
padding-left: 5px;
border-left: 2px dotted #000;
font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;
line-height: 20px;
}

h4{
font:12px verdana;
margin: 2px 0px;
padding: 2px;
color: #FF380C;
background-color: none;
border: 0px solid #000;
font-weight : normal;
width: 106px;
}

h4:hover {
font:12px verdana;
margin: 2px 0px;
padding: 2px;
color: black;
background-color: white;
border: 0px solid #000;
font-weight : bold;
}
</style>

</head>

<body onload="hideall();">

<h4 ><a href="manovikas.htm">Home</a></h4>

<h4 onclick="hideall();gogirl('list2')"><a href="#">About Us</a></h4>
<ul id="list2">
<li><a href="index.php?page=1">History</a></li>
<li><a href="index.php?page=2">Vision</a></li>
<li><a href="index.php?page=3">Logo</a></li>
<li><a href="index.php?page=1">Management</a></li>
<li><a href="index.php?page=2">Academics</a></li>
<li><a href="index.php?page=3">Evaluation</a></li>
</ul>

<h4 ><a href="index.htm">Admissions</a></h4>

<h4 ><a href="index.htm">Specials</a></h4>


<h4 onclick="hideall();gogirl('list5')"><a href="#">School Life</a></h4>
<ul id="list5">
<li><a href="index.php?page=1">Sports Program</a></li>
<li><a href="index.php?page=2">Mega Events</a></li>
<li><a href="index.php?page=3">Regular Events</a></li>
<li><a href="index.php?page=1">Students Council</a></li>
<li><a href="index.php?page=2">School Band</a></li>
<li><a href="index.php?page=3">Special Days</a></li>
</ul>

<h4 onclick="hideall();gogirl('list6')"><a href="#">Facilities</a></h4>
<ul id="list6">
<li><a href="index.php?page=1">Sports</a></li>
<li><a href="index.php?page=2">Counsellor</a></li>
<li><a href="index.php?page=3">Campus</a></li>
<li><a href="index.php?page=1">Library</a></li>
<li><a href="index.php?page=2">Resource Centre</a></li>
<li><a href="index.php?page=3">Other Services</a></li>
</ul>

<h4 onclick="hideall();gogirl('list7')"><a href="#">Talent Corner</a></h4>
<ul id="list7">
<li><a href="index.php?page=1">Contributions</a></li>
</ul>

<h4 ><a href="index.htm">Photo Gallery</a></h4>


<h4 ><a href="index.htm">Graffiti</a></h4>


<h4 onclick="hideall();gogirl('list10')"><a href="#">Contact Us</a></h4>
<ul id="list10">
<li><a href="index.php?page=1">Parents</a></li>
<li><a href="index.php?page=2">Ex-Students</a></li>
<li><a href="index.php?page=3">Enquiry</a></li>
</ul>
</body>

</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members