expandable menus

Forum Moderators: open

Message Too Old, No Replies

expandable menus

systemh

12:00 pm on Jun 28, 2007 (gmt 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

ØParents
ØEx-students
ØOthers

systemh

1:24 pm on Jun 28, 2007 (gmt 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>

}
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>

<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>

Marshall

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

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

systemh

4:47 am on Jun 29, 2007 (gmt 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">

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>

}
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>

<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>

Marshall

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

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

&plusmn;

Marshall

systemh

6:23 am on Jun 29, 2007 (gmt 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

systemh

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

How do I change the + to - when the menu is open?

Marshall

7:22 am on Jun 29, 2007 (gmt 0)

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

systemh

11:03 am on Jun 29, 2007 (gmt 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?

Marshall

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

Sent you a sticky

systemh

11:37 am on Jun 29, 2007 (gmt 0)

thanks buddy

systemh

12:08 pm on Jul 5, 2007 (gmt 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">

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>

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>

<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>