Tweet
Hidden Drop Down Menu
Hello thanks for taking the time to read this. I need help getting my hidden drop down menu to work. I don't know what the problem is. My guess is the commands for the menu to be hidden or I am missing code. I want my menu to do the exact same thing as http://kunste.cat/ website. The code is from exhibits and it is a template but I can't seem to get it to work. I need help or any suggestions. Thank you.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<div id="menu">
<div class="container">
<p>
<ul>
<li class="section-title"> l architectes</li>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
</ul>
<ul>
<li class="section-title"> l architectes</li>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
</ul>
<script>
$(document).ready(function(){
// First we hide all exhibitis
$("#menu ul li.section-title").nextAll().hide();
// then the active exhibit is showed
$("#menu ul").each(function(){
$(this).find("li.active").prevAll().nextAll().show();
});
// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").click(function(){
$("#menu ul li.section-title").nextAll().slideUp();
$("#menu ul li a").nextAll().slideUp();
$(this).nextAll().slideDown("fast");
});
});
</script>
<style>
li a {
padding:0px 2px 1px 0px;
width:145px;
height:16px;
display:block;
/*background-color:#292929;*/
}
li a:link {
text-decoration: none;
color:#555555;
padding:0px 0px 0px 0px;
}
li a:active {
text-decoration: none;
color: #666;
padding:0px 0px 0px 0px;
}
li a:visited {
text-decoration: none;
color:#555555;
padding:0px 0px 0px 0px;
}
li a:hover {
text-decoration: none;
/*background-color:#F1F1F1;*/
background-color:#f6f6f6;
color:#DC0000;
font-weight:bold;
padding:0px 0px 0px 0px;
}
#menu {
float:left;
width: 200px; /*tamany del menu esquerra*/
position: relative;
height: 100%;
text-align:left;
margin:0px 10px 0px 0px;
}
#menu ul {
list-style: none;
margin: 1px 10px 0px 10px;/* espai entre grups*/
font-size: 10px;
/*background-color:#292929;*/
background-color:#FFFFFF;
}
#menu ul li.section-title {
width: 155px;
padding:3px 0px 0px 5px;
color:#333333;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
font-weight:bold; /*titol de secciغ*/
height:20px;
border-top:1px solid #DDDDDD;
vertical-align:top;
cursor
ointer;
/*background-color:#F1F1F1;*/
background-color:#f6f6f6;
}
#menu ul li.section-title:hover {
width: 155px;
padding:3px 0px 0px 5px;
color:#333333;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
font-weight:bold; /*titol de secciغ*/
height:20px;
border-top:1px solid #DDDDDD;
vertical-align:top;
cursorointer;
color:#DC0000;
/*background-color:#F1F1F1;*/
}
padding:0px 0px 0px 5px;
width:155px;
height:15px;
/*background-color:#F1F1F1;*/
background-color:#f6f6f6;
}
#content {/*subpagina dreta contenidor*/
width:730px;
float:left;
height: 100%;
margin-top:0px 0px 0px 0px;
padding:0px 0px 0px 15px;
top: 0px;
background-color:#FFFFFF;
}
.container {
float:left;
position:relative;
padding: 5px 5px 5px 5px;
background-color:#FFFFFF;
}
.container2 {
float:left;
position:relative;
padding: 5px 5px 5px 0px;
background-color:#FFFFFF;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<div id="menu">
<div class="container">
<p>
<ul>
<li class="section-title"> l architectes</li>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
</ul>
<ul>
<li class="section-title"> l architectes</li>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
<li style="display: ;">
<a href="http:url"onclick="do_click( );">garderie</a>
</ul>
<script>
$(document).ready(function(){
// First we hide all exhibitis
$("#menu ul li.section-title").nextAll().hide();
// then the active exhibit is showed
$("#menu ul").each(function(){
$(this).find("li.active").prevAll().nextAll().show();
});
// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").click(function(){
$("#menu ul li.section-title").nextAll().slideUp();
$("#menu ul li a").nextAll().slideUp();
$(this).nextAll().slideDown("fast");
});
});
</script>
<style>
li a {
padding:0px 2px 1px 0px;
width:145px;
height:16px;
display:block;
/*background-color:#292929;*/
}
li a:link {
text-decoration: none;
color:#555555;
padding:0px 0px 0px 0px;
}
li a:active {
text-decoration: none;
color: #666;
padding:0px 0px 0px 0px;
}
li a:visited {
text-decoration: none;
color:#555555;
padding:0px 0px 0px 0px;
}
li a:hover {
text-decoration: none;
/*background-color:#F1F1F1;*/
background-color:#f6f6f6;
color:#DC0000;
font-weight:bold;
padding:0px 0px 0px 0px;
}
#menu {
float:left;
width: 200px; /*tamany del menu esquerra*/
position: relative;
height: 100%;
text-align:left;
margin:0px 10px 0px 0px;
}
#menu ul {
list-style: none;
margin: 1px 10px 0px 10px;/* espai entre grups*/
font-size: 10px;
/*background-color:#292929;*/
background-color:#FFFFFF;
}
#menu ul li.section-title {
width: 155px;
padding:3px 0px 0px 5px;
color:#333333;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
font-weight:bold; /*titol de secciغ*/
height:20px;
border-top:1px solid #DDDDDD;
vertical-align:top;
cursor
ointer;/*background-color:#F1F1F1;*/
background-color:#f6f6f6;
}
#menu ul li.section-title:hover {
width: 155px;
padding:3px 0px 0px 5px;
color:#333333;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
font-weight:bold; /*titol de secciغ*/
height:20px;
border-top:1px solid #DDDDDD;
vertical-align:top;
cursor
ointer;color:#DC0000;
/*background-color:#F1F1F1;*/
}
padding:0px 0px 0px 5px;
width:155px;
height:15px;
/*background-color:#F1F1F1;*/
background-color:#f6f6f6;
}
#content {/*subpagina dreta contenidor*/
width:730px;
float:left;
height: 100%;
margin-top:0px 0px 0px 0px;
padding:0px 0px 0px 15px;
top: 0px;
background-color:#FFFFFF;
}
.container {
float:left;
position:relative;
padding: 5px 5px 5px 5px;
background-color:#FFFFFF;
}
.container2 {
float:left;
position:relative;
padding: 5px 5px 5px 0px;
background-color:#FFFFFF;
}
</style>
Comment