1
私は数日前に初めて実際のウェブサイトを構築していましたが、いくつかの問題を解決しましたが、現在はモバイルのドロップダウンメニューに固執しています。私は、リスト項目は、メニュー内の下にスライドしたいwww.biblio-tech.nlモバイルのドロップダウンメニューslidedown
し、それに応じてスライドするメニューの残りの部分：ここで
は、ウェブサイトです。
$(document).ready(function(){
$("#li1").click(function(){
$(".dd1").slideToggle("fast");
\t \t $('.dd2').slideUp();
});
\t \t $("#li2").click(function(){
\t \t \t $(".dd2").slideToggle("fast");
\t \t \t $('.dd1').slideUp();
\t \t });
\t \t \t $('.bgOverlay').click(function() {
\t \t \t $('.dd1').slideUp();
\t \t \t $('.dd2').slideUp();
\t \t \t $('ul').slideUp();
\t \t \t }); \t
});
$(document).ready(function(){
$("#nav-toggle").click(function(){
$("ul").slideToggle(1);
\t \t $('.dd1').slideUp();
\t \t $('.dd2').slideUp();
});
});
.navbar {
position: fixed;
height: 3em;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
.navbar ul {
position: relative;
display: none;
top: 100%;
right:-20%;
height: 0;
list-style: none;
font-size: 160%;
}
.navbar ul li {
position: relative;
width: 60%;
background-color: rgba(0,0,0,0.5);
border-top: none;
text-indent: 10px;
color: gray;
border-bottom: 1px solid rgba(254,254,254,0.1);
}
.navbar ul li:hover {
background-color: rgba(0,0,0,0.6);
}
.navbar ul li a{
text-decoration: none;
color: rgba(254,254,254,1);
font-weight: 100;
} \t
.navbar ul ul ul, .navbar ul ul ul li {
display: none;
}
.navbar ul ul, .navbar ul ul li {
position: relative;
font-size: 100%;
background-color: rgba(0,0,0,0);
}
li:last-child {
border-radius: 0px 0px 10px 10px;
}
li:first-child {
border-top: 1px solid rgba(254,254,254,0.3);
}
.dd1 {
display: none;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.dd1 li {
font-size: 100%;
background-color: rgba(0,0,0,0)
}
.dd2 {
display: none;
position: relative;
width: 100%;
height: 20%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
#nav-toggle {
position: absolute;
right: 10px;
top: 25%;
}
#nav-toggle {
cursor: pointer;
padding: 10px 35px 16px 0px;
z-index: 5;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 35px;
background: rgba(254,254,254,0.9);
position: absolute;
display: block;
content: '';
opacity: 0.9;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="navbar">
<a id="nav-toggle"><span></span></a>
<ul>
<li id="li1"><a href="3d.html">3d printing</a>
<ul>
<div class="dd1">
<li><a href="#">blueprints</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
</ul>
</li>
<li><a href="#">information</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis.</li>
</ul>
</li>
<li class="noTransition"><a href="#">Software</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. </li>
</ul>
</li>
</div>
</ul>
</li>
<li id="li2"><a href="#">computing</a>
<ul>
<div class="dd2">
<li><a href="#">hardware</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu.</li>
</ul>
</li>
<li><a href="#">information</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis.</li>
</ul>
</li>
<li class="noTransition"><a href="#">software</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. </li>
</ul>
</li>
</div> \t
</ul>
</li>
<li><a href="#">virtual</a></li>
</ul>
</div>
追記：slidetoggleあなたは1を渡すときに、それはかなり無駄ですパラメータとしてミリ秒を受け入れます。 300程度で試してみてください。これは本当に私のために何もしない –