Skip to content

Instantly share code, notes, and snippets.

@Yunaka12

Yunaka12/drop.html

Last active October 30, 2018 00:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Yunaka12/01d843a659204e86a845f101b0564ce2 to your computer and use it in GitHub Desktop.
Save Yunaka12/01d843a659204e86a845f101b0564ce2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
drop.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body{
margin: 0 auto;
width: 980px;
}
a{
text-decoration: none;
color: #fff;
}
ul{
list-style: none;
text-align: center;
background-color: #000;
padding-left: 0;
font-size: 0;
}
ul li{
display: inline-block;
font-size: 16px;
width: 33.26%;
vertical-align: top;
}
.menu{
display: block;
padding-top: 10px;
padding-bottom:10px;
}
.inner{
position: absolute;
left: 0;
z-index: 2;
display: none;
width: 980px;
background-color: #000;
color: #fff;
right: 0;
margin: auto;
padding:50px 0 20px 0;
}
#li0{
border-right: 1px solid #fff;
}
#li1{
border-right: 1px solid #fff;
}
.sub_menu{
width: 100%;
padding-left: 12.5%;
text-align: left;
color: #f6f620;
font-weight: bold;
}
.three_inner_item{
float: left;
width: 30.1%;
background-color: #f5f5f5;
margin: 1.2%;
}
.three_inner_item:first-child{
margin-left: 2.4%;
}
.three_inner_item:nth-child(3){
margin-right: 2.4%;
}
.three_inner_item a{
color: #000;
display: block;
}
.three_inner_item a:hover{
background-color: #fff;
}
.eight_inner_item{
float: left;
width: 10%;
margin: 1.2%;
background-color: #f5f5f5;
}
.eight_inner_item a{
color: #000;
display: block;
}
.clear_box{
clear: both;
}
</style>
</head>
<body>
<ul>
<li id="li0">
<a href="#" class="menu">メニューメイン項目デモ</a>
<div class="inner" id="testA">
<div class="three_inner_item"><a href="#0">文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ</a></div>
<div class="three_inner_item"><a href="#1">文章デモ文章デモ文章デモ文章デモ</a></div>
<div class="three_inner_item"><a href="#2">文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ</a></div>
<div class="clear_box"></div>
</div>
</li>
<li id="li1">
<a href="#" class="menu">メニューメイン項目デモ</a>
<div class="inner" id="testB">
<div class="sub_menu">サブメニュー項目デモ</div>
<div class="inner_item_wrap">
<div class="eight_inner_item"><a href="#0">文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ</a></div>
<div class="eight_inner_item"><a href="#1">文章デモ文章デモ</a></div>
<div class="eight_inner_item"><a href="#2">文章デモ文章デモ文章デモ文章デモ</a></div>
<div class="eight_inner_item"><a href="#3">文章デモ</a></div>
<div class="eight_inner_item"><a href="#4">文章デモ文章デモ文章デモ文章デモ文章デモ</a></div>
<div class="eight_inner_item"><a href="#5">文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ</a></div>
<div class="eight_inner_item"><a href="#6">文章デモ文章デモ文章デモ</a></div>
<div class="eight_inner_item"><a href="#7">文章デモ文章デモ文章デモ</a></div>
<div class="clear_box"></div>
</div>
</div>
</li>
<li id="li2">
<a href="#" class="menu">メニューメイン項目デモ</a>
<div class="inner" id="testC">
<div class="three_inner_item" ><a href="#0">文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ</a></div>
<div class="three_inner_item"><a href="#1">文章デモ</a></div>
<div class="three_inner_item"><a href="#2">文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ文章デモ</a></div>
<div class="clear_box"></div>
</div>
</li>
</ul>
<script>
$("#li0").hover(function(){
$("#testA").stop().slideToggle();
},function(){
$("#testA").stop().slideToggle();
});
$("#li1").hover(function(){
$("#testB").stop().slideToggle();
},function(){
$("#testB").stop().slideToggle();
});
$("#li2").hover(function(){
$("#testC").stop().slideToggle();
},function(){
$("#testC").stop().slideToggle();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment