我有一个博客网站,想制作一个下拉菜单,但没有语法。我已经在菜单栏上创建了菜单超链接,我想在该超链接中包含下拉菜单,只是因为我使用 CSS 以我的方式设计它并且不想破坏该设计。请告诉我该怎么做。
添加语法会破坏整个外观并形成一个类似框的设计。
HTML:
<div id="menu" class="dropdown">
<ul>
<li class="menu-item" data-url="#page1">Item 1</li>
<li class="menu-item" data-url="#page2">Item 2</li>
<li class="menu-item" data-url="#page3">Item 3</li>
</ul>
<span id="menu-button" class="fa fa-bars"></span>
</div>
.CSS:
.dropdown {
margin-top: -100px;
height: 100px;
position: relative;
background-color: blue;
width: fit-content;
}
.dropdown>ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.dropdown>ul>li {
cursor: pointer;
padding: 0.3em 1em 0.3em 1em;
margin: 0;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
.dropdown>ul>li:hover {
background-color: black;
color: white;
}
.dropdown>span {
cursor: pointer;
position: absolute;
bottom: -1em;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
.dropdown>span:hover {
opacity: 0.5;
}
.JS:
$(document).ready(function() {
$("#menu-button").click(function() {
toggleMenu();
});
$(".menu-item").click(function(){
var url=$(this).attr("data-url");
console.log(url);
toggleMenu();
});
});
function toggleMenu() {
var slider = "#menu";
var sliderHeight = $(slider).height();
if ($(slider).css("margin-top") == -sliderHeight + "px" && !$(slider).is(':animated')) {
$(slider).animate({
"margin-top": '+=' + sliderHeight
});
$(this).addClass("active");
} else {
if (!$(slider).is(':animated')) {
$(slider).animate({
"margin-top": '-=' + sliderHeight
});
$(this).removeClass("active");
}
}
}