JQuery horizontale Accordéon CSS
https://stackoverflow.com/questions/587329
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis en train de construire un simple multi-niveau UL Accordéon horizontal (ou menu coulissant) dans Jquery. Hunter Daley semble gracieusement fourni le code Jquery, mais je ne peux pas à comprendre le css. Je sais que c'est newb, mais je suis vraiment coincé.
Quand li glisse Ul Ul sur elle crée un saut de ligne, je voudrais avoir tout affichage en ligne, sans pauses. J'ai essayé des espaces: nowrap, affichage en ligne etc Il semblera tout simplement pas le faire. Toutes les idées?
Selon, la réponse de Glavic: Je voulais utiliser des flotteurs, mais si je fais des bugs Safari out et flash sous-niveau UL lors de l'animation:
Utilisation Flotteurs:
Bon, je tente de le faire sans flotteurs. Je suis en train de coller avec la fonction d'animation.
insectes Safari sur et clignote sous ul pendant l'animation.
<style type="text/css">
<!--
body {
font-size: 1em;
line-height: 1em;
}
ul {
background-color: yellow;
list-style: none;
margin: 0;
padding: 0;
height: 1em;
float: left;
}
ul li {
background-color: aqua;
float: left;
}
ul li ul {
background-color: blue;
}
ul li ul li {
background-color: green;
}
a, a:link, a:hover, a:visited, a:active {
color: black;
text-decoration: none;
float: left;
}
-->
</style>
Message d'origine:
<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">
<!--
ul{
list-style: none;
background-color: yellow;
margin: 0;
padding: 0;
white-space: nowrap;
}
ul li {
background-color: aqua;
display: inline;
}
ul li ul {
background-color: blue;
}
ul li ul li {
background-color: green;
}
a, a:link, a:hover, a:visited, a:active {
color: black;
text-decoration: none;
}
-->
</style>
<script type="text/javascript">
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();
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>
<ul>
<li>
<a href="#">Top-level 1</a>
</li>
<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>
<li>
<a href="#">Top-level 3</a>
<ul>
<li><a href="#">Bottom Level B1</a></li>
<li><a href="#">Bottom Level B2</a></li>
</ul>
</li>
<li>
<a href="#">Top-level 4</a>
</li>
</ul>
</body>
</html>
La solution
Si je vous comprends bien que vous aimeriez avoir des premier et deuxième niveau de menu dans une ligne (horizontale)?
Essayez ceci:
<style type="text/css">
ul{
list-style: none;
background-color: yellow;
margin: 0;
padding: 0;
float: left;
}
ul li {
background-color: aqua;
float: left;
}
ul li ul {
background-color: blue;
}
ul li ul li {
background-color: green;
}
a, a:link, a:hover, a:visited, a:active {
color: black;
text-decoration: none;
float: left;
}
</style>
Autres conseils
Je pense que « display: inline » ferait l'affaire - mais la fonction Animer est de régler l'affichage à « bloc » au lieu de « en ligne »
.S'il est correct de « pression » en place au lieu d'animation, vous pouvez le faire à la place.
<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">
ul{list-style:none;background-color:yellow;margin:0;padding:0;white-space:nowrap;display:inline;}
li ul{display:inline;}
ul li{background-color:aqua;display:inline;}
ul li ul{background-color: blue;}
ul li ul li{background-color: green;}
a, a:link, a:hover, a:visited, a:active{color: black;text-decoration: none;}
</style>
<script type="text/javascript">
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();
if ($sub.css("display") == "none") {
if ($current != null)
//$current.animate({ width: 'hide' }); // if you want to only show one sub at a time
$current.removeAttr("display").attr({ style: "display:none;" });
$sub.removeAttr("style").attr({ display: "inline" });
$current = $sub;
}
else {
$sub.removeAttr("display").attr({ style: "display:none;" });
$current = null;
}
});
});
</script>
</head>
<body>
<ul>
<li>
<a href="#">Top-level 1</a>
</li>
<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>
<li>
<a href="#">Top-level 3</a>
<ul>
<li><a href="#">Bottom Level B1</a></li>
<li><a href="#">Bottom Level B2</a></li>
</ul>
</li>
<li>
<a href="#">Top-level 4</a>
</li>
</ul>
</body>
</html>
Il est amusant de construire vous-même. Il est aussi amusant d'utiliser cette génialité: http://jqueryui.com/demos/accordion/
