Jquery'de basit bir çok seviyeli UL Yatay Akordeon (veya slayt menüsü) oluşturmaya çalışıyorum. Hunter Daley, Jquery kodunu nezaketle verdi, ancak css'i anlayamıyorum. Bunun yeni olduğunu biliyorum ama gerçekten sıkışıp kaldım.JQuery Yatay Akordeon CSS
Ul li Ul dışarıya doğru kaydığı zaman, bir çizgi çizgisi oluşturur, ben herşeyi satır içi, satır sonu olmadan görüntülemek isterim. Ben beyaz boşluk denedim: nowrap, ekran satır içi vb. Sadece bunu yapmak görünmüyor. Herhangi bir fikir? Glavić cevabı, gereğince
: Ben yüzen kullanmaya çalışıyor, ama ben Safari böcek dışarı yapmak ve animasyon sırasında alt düzey UL flaş eğer edildi:
Sağ:
Şamandıralar kullanma Şamandıra olmadan yapmaya çalışıyordum. Animasyon işleviyle uğraşmaya çalışıyorum.
Safari, animasyonu sırasında yankılanır ve yanıp söner.
<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>
Orijinal Mesaj:
<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>
buraya bir göz http://stackoverflow.com/a/27262010/1922144 – davidcondrey