سلام
میخواستم بدونم که تا حالا یجور navigation هارو دیدید که وقتی میزنید روش باز میشن،
من دیدم اون هارو بدون js اینکارو کرده! خواستم بدونم چجوری با css میشه همچین کاری کرد
و مثلا با زدن روش منو باز شه؟
سلام
<h2>Checkbox version</h2>
<div class="dropdown">
<input type="checkbox" id="my-dropdown" value="" name="my-checkbox">
<label for="my-dropdown"
data-toggle="dropdown">
Choose one
</label>
<ul>
<li><a href="#">Coffee</a></li>
<li><a href="#">Coverage</a></li>
<li><a href="https://twitter.com/hashtag/covfefe">Covfefe</a></li>
</ul>
</div>
<h2>Anchor version</h2>
<div class="dropdown">
<ul id="my-dropdown2">
<li><a href="#">Coffee</a></li>
<li><a href="#">Coverage</a></li>
<li><a href="https://twitter.com/hashtag/covfefe">Covfefe</a></li>
</ul>
<a href="#my-dropdown2"
aria-controls="my-dropdown2"
role="button"
data-toggle="dropdown"
id="my-dropdown2-btn">
Choose one
</a>
<a href="#my-dropdown2-btn"
aria-controls="my-dropdown2"
role="button"
data-toggle="dropdown"
class="close">
Close dropdown
</a>
</div>
و css
.dropdown {
position: relative;
display: inline-block;
}
.dropdown > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.dropdown > label,
.dropdown > a[role="button"] {
display: inline-block;
padding: 6px 15px;
color: #333;
line-height: 1.5em;
text-decoration: none;
border: 1px solid #8c8c8c;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.dropdown > label:hover,
.dropdown > a[role="button"]:hover,
.dropdown > a[role="button"]:focus {
border-color: #333;
}
.dropdown > label:after,
.dropdown > a[role="button"]:after {
content: "\f0d7";
font-family: FontAwesome;
display: inline-block;
margin-left: 6px;
}
.dropdown > ul {
position: absolute;
z-index: 999;
display: block;
left: -100vw;
top: calc(1.5em + 14px);
border: 1px solid #8c8c8c;
background: #fff;
padding: 6px 0;
margin: 0;
list-style: none;
width: 100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);
-moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);
box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.dropdown > ul a {
display: block;
padding: 6px 15px;
text-decoration: none;
color: #333;
}
.dropdown > ul a:hover,
.dropdown > ul a:focus {
background: #ececec;
}
.dropdown > input[type="checkbox"]:checked ~ ul,
.dropdown > ul:target {
left: 0;
}
.dropdown > [type="checkbox"]:checked + label:after,
.dropdown > ul:target ~ a:after {
content: "\f0d8";
}
.dropdown a.close {
display: none;
}
.dropdown > ul:target ~ a.close {
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-indent: -100vw;
z-index: 1000;
}
/*
Demo purposes only
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 30px;
color: #333;
}
.dropdown + h2 {
margin-top: 60px;
}
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟