vfl
3 سال پیش توسط vfl مطرح شد
2 پاسخ

باز شدن منو با زدن روی اون بدون js و با css

سلام
میخواستم بدونم که تا حالا یجور navigation هارو دیدید که وقتی میزنید روش باز میشن،
من دیدم اون هارو بدون js اینکارو کرده! خواستم بدونم چجوری با css میشه همچین کاری کرد
و مثلا با زدن روش منو باز شه؟


ثبت پرسش جدید
moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش مطرح شد
2

سلام

<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;
}

@spaceandtime24


حدیثه مطلوب
تخصص : فرانت اند
@hadisematloob 3 سال پیش مطرح شد
0

سلام دوست عزیز
فکر کنم این مثال ها میتونه کمکتون کنه


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام