MK Designs
Gebruiker
- Lid geworden
- 21 dec 2009
- Berichten
- 6
Hallo mijn eerste post hier !
Ik heb een vraag over een javascript menu.
Voor een klant met specifieke eisen heb ik een javascript menu gevonden (aangezien mijn javascript kennis niet erg ver rijkt) die aansluit op de wensen.
Op 1 ding na.
Het is een menu wat horizontaal uitschuift.
Het enige waar ik mee zit is dat het submenutje wat uitschuift moet blijven staan.
Nu zal dit vast een simpele oplossing (toevoeging) zijn maar ik zou het niet weten.
Wellicht dat dit met CSS te doen is, maar dat betwijfel ik.
Ik ben al een tijd op zoek en aan het speuren naar een ander menu maar die kan ik niet vinden.
Hier het script en toebehoren:
Iemand enig idee ?
Alvast bedankt !
Ik heb een vraag over een javascript menu.
Voor een klant met specifieke eisen heb ik een javascript menu gevonden (aangezien mijn javascript kennis niet erg ver rijkt) die aansluit op de wensen.
Op 1 ding na.
Het is een menu wat horizontaal uitschuift.
Het enige waar ik mee zit is dat het submenutje wat uitschuift moet blijven staan.
Nu zal dit vast een simpele oplossing (toevoeging) zijn maar ik zou het niet weten.
Wellicht dat dit met CSS te doen is, maar dat betwijfel ik.
Ik ben al een tijd op zoek en aan het speuren naar een ander menu maar die kan ik niet vinden.
Hier het script en toebehoren:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<title>untitled</title>
<style type="text/css">
#container {
display: table;
}
ul{
list-style: none;
background-color: yellow;
margin: 0;
padding: 0;
float: left;
height: 32px; /* For testing */
font-family: helvetica;
font-size: 18px;
overflow: hidden;
}
ul li {
background-color: aqua;
float: left;
}
ul li ul {
background-color: blue;
display: none;
}
ul li ul li {
background-color: green;
}
a, a:link, a:hover {
color: black;
text-decoration: none;
padding: 12px;
font-weight: 700;
float: left;
}
a:visited {
color: black;
text-decoration: none;
padding: 12px;
font-weight: 700;
float: left;
}
a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: 700;
float: right;
}
ul li ul li a, ul li ul li a:link, ul li ul li a:hover, ul li ul li a:visited, ul li ul li a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: normal;
float: right;
}
</style>
<script type="text/javascript">
/* Care of Hunter Daley */
var $current = null;
$(document).ready(function(){
$("ul li ul").hide(); // hide submenus by default on load
$("ul li a").click(function(){
var $sub = $(this).next();
$("ul li ul").animate({ width: 'hide' });
if ($sub.css("display") == "none")
{
if ($current != null)
$current.animate({ width: 'hide' }); // if you want to only show one sub at a time
$sub.animate({ width: 'show' });
$current = $sub;
}
else
{
$sub.animate({ width: 'hide' });
$current = null;
}
});
});
</script>
</head>
<body>
<div id="container">
<ul>
<li>
<a href="#">Top-level 1</a>
<ul>
<li><a href="#">Bottom Level A1</a></li>
<li><a href="#">Bottom Level A2</a></li>
<li><a href="#">Bottom Level A3</a></li>
<li><a href="#">Bottom Level A4</a></li>
</ul>
</li>
</ul><br><br>
<ul>
<li>
<a href="#">Top-level 2</a>
<ul>
<li><a href="#">Bottom Level A1</a></li>
<li><a href="#">Bottom Level A2</a></li>
<li><a href="#">Bottom Level A3</a></li>
<li><a href="#">Bottom Level A4</a></li>
</ul>
</li>
</ul><br><br>
<ul>
<li>
<a href="#">Top-level 3</a>
<ul>
<li><a href="#">Bottom Level A1</a></li>
<li><a href="#">Bottom Level A2</a></li>
<li><a href="#">Bottom Level A3</a></li>
<li><a href="#">Bottom Level A4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>Iemand enig idee ?
Alvast bedankt !
