0

пример меню Css

Каким образом посредством css можно создать меню аналогичное данной картинке?

1
  • у ul левый бордер. у li черточки абсолютно позиционированны через :before например
    – xaja
    24 фев 2016 в 18:23

1 ответ 1

3

Пример

* {
  padding: 0;
  margin: 0;  
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.b-menu {
  list-style: none;
  max-width: 400px;
  margin: 25px auto;
  background: #333;
  font-family: 'Segoe UI', sans-serif;
}
.b-menu * ul{
  list-style: none;
}
.b-menu > li {
  border-bottom: 1px solid #222;
  position: relative;
}
.b-menu > li:first-child {
  border-top: 1px solid #222;
}
.b-menu > li [id^=m-] {
  display: none;
}
.b-menu > li [id^=m-] + label {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 12px 25px;
  cursor: pointer;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.b-menu > li [id^=m-] + label:hover{
  background: #111;
}
.b-menu > li [id^=m-]:checked + label{
  background: #000;
}
.b-menu > li [id^=m-] + label ~ [id^=submenu-] {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.b-menu > li [id^=m-] + label:after{
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #666 transparent transparent transparent;
   -webkit-transition: 0.3s;
  transition: 0.3s;
}
.b-menu > li [id^=m-]:checked + label:after{
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.b-menu > li [id^=m-] + label:before{
  content: '';
  position: absolute; top: -1px; left: 0;
  width: 0;
  height: calc(100% + 2px);
  background: #619EF1;
   -webkit-transition: 0.3s;
  transition: 0.3s;
}
.b-menu > li [id^=m-]:checked + label:before{  
  width: 8px;  
}
.b-menu > li #m-1:checked + label ~ #submenu-1,
.b-menu > li #m-2:checked + label ~ #submenu-2,
.b-menu > li #m-3:checked + label ~ #submenu-3,
.b-menu > li #m-4:checked + label ~ #submenu-4{
  max-height: 300px;
}



.b-menu > li > ul {
  background: #222222;
  padding-left: 40px;
}
.b-menu > li > ul > li {
  position: relative;
}
.b-menu > li > ul > li:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 1px;
  background: #aaa;
  margin-top: -0.5px;
}
.b-menu > li > ul > li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #aaa;
}
.b-menu > li > ul > li:first-child:after {
  top: 50%;
}
.b-menu > li > ul > li:last-child:after {
  top: auto;
  bottom: 50%;
}
.b-menu > li > ul.submenu-one > li:first-child:after,
.b-menu > li > ul.submenu-one > li:last-child:after {
  display: none;
}
.b-menu > li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 12px 25px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.b-menu > li a > span{
  display: inline-block;
  position: relative;
}
.b-menu > li a > span:before{
  content: '';
  position: absolute; top: 100%; left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.b-menu > li a > span:hover:before{
  width: 100%;
}
<ul class="b-menu">
  <li>
    <input type="radio" name="m" id="m-1" checked />
    <label for="m-1">Menu 1</label>
    <ul id="submenu-1">
    <li><a href="#"><span>submenu 1.1</span></a></li>
      <li><a href="#"><span>submenu 1.2</span></a></li>
      <li><a href="#"><span>submenu 1.3</span></a></li>
      <li><a href="#"><span>submenu 1.4</span></a></li>
      <li><a href="#"><span>submenu 1.5</span></a></li>
    </ul>
  </li>
  <li>
    <input type="radio" name="m" id="m-2" />
    <label for="m-2">Menu 2</label>
    <ul id="submenu-2">
      <li><a href="#"><span>submenu 2.1</span></a></li>
      <li><a href="#"><span>submenu 2.2</span></a></li>
      <li><a href="#"><span>submenu 2.3</span></a></li>
    </ul>
  </li>
  <li>
    <input type="radio" name="m" id="m-3" />
    <label for="m-3">Menu 3</label>
    <ul id="submenu-3">
      <li><a href="#"><span>submenu 3.1</span></a></li>
      <li><a href="#"><span>submenu 3.2</span></a></li>
    </ul>
  </li>
  <li>
    <input type="radio" name="m" id="m-4" />
    <label for="m-4">Menu 4</label>
    <ul id="submenu-4" class="submenu-one">
      <li><a href="#"><span>submenu 4.1</span></a></li> 
    </ul>
  </li>
</ul>

2
  • а как вы подобрали/угадали/поняли, что .b-menu > li > ul > li:last-child:after надо top:auto ? 24 фев 2016 в 18:36
  • При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. При задании top:auto - не меняеся положение элемента + добавляем bottom:50%(нужный нам отступ снизу);
    – soledar10
    24 фев 2016 в 19:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.