0

Имеется раскрывающийся абзац на css

.hide,
.hide + label ~ p {
  display: none;
}
.hide:checked + label + p {
  display: block;
}
<div>
  <input type="checkbox" id="hd-1" class="hide">ТЕсттектстектстектстектстектстектстектстектстектстектстектс
  <label for="hd-1">
    <img src="https://ru.wikipedia.org/static/favicon/wikipedia.ico" alt="Читать далее">
  </label>
  <p>
    <br>Новыйновыйновыйновыйновый
    <br>
    <br>ЕщеЕщеЕщеЕщеЕщеЕще.</p>
</div>

И есть раскрывающийся список

.hide,
.hide + label ~ p {
  display: none;
}
.hide:checked + label + p {
  display: block;
}
<div>Название:
  <ul>
    <li>пункт 1.</li>
    <li>пункт 2</li>
    <li>пункт 3.</li>
    <li>
      <input id="hd-2" class="hide" type="checkbox" />
      <label for="hd-2">
        <img src="https://ru.wikipedia.org/static/favicon/wikipedia.ico" alt="Читать далее" />
      </label>
      <p class="dotted">пункт 4.</p>
    </li>
  </ul>
</div>

Вопрос: как подправить раскрывающийся список, так, чтобы он красиво отображался при раскрытии (желательно с помощью стилей)? пока у меня коряво получается Фидл

7
  • если вам нужен список - используйте для этого элемент списка: <ul>,<ol>
    – Grundy
    7 апр 2016 в 13:22
  • Ну пока видно, что вы пытаетесь отверткой гвоздь забить. Опишите подробнее что вы имеете ввиду говоря: чтобы он красиво отображался при раскрытии.
    – Grundy
    7 апр 2016 в 13:28
  • дополнил вопрос - надеюсь, так будет понятнее
    – Вася
    7 апр 2016 в 13:29
  • 1
    вот это не то что вы хотите? jsfiddle.net/Cerebrl/uhykY
    – Batanichek
    7 апр 2016 в 13:31
  • @Grundy при раскрытии сейчас напротив точки - иконка вики, а пункт меню ниже. хочется добиться того, чтобы при раскрытии список выглядел цельным
    – Вася
    7 апр 2016 в 13:31

1 ответ 1

3

Красота - понятие, все-таки, субъективное. Постарайтесь ставить задачу более конкретно. Я считаю способ ниже довольно симпатичным. Надеюсь, поможет. И еще, лучше скрывать checkbox с помощью абсолютного позиционирования и "уведенияУ в сторону, нежели применять display: none - это чревато проблемами на некоторых мобильных устройствах и электронных книгах.

Код-перо

P.S. со списком понятно - хотите "красиво". А с абзацем?

@import url(http://weloveiconfonts.com/api/?family=entypo);

div {
  width: 300px;
  background: #f5f5f5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  padding: 10px 20px;
  margin: 20px auto;
}
a, a:visited {
  text-decoration: none;
  color: #333;
}
p {
  margin: 0;
}
ul {
  width: 120px;
}
div, li {
  font: 26px/1.5 'Segoe Ui', sans-serif;
  list-style: none;
  color: #333;
  position: relative;
  border-bottom: 1px solid #eee;
}
li:first-child {
  border-top: 1px solid #eee;
}

li:last-child {
  border-bottom: none;
}

.level1 a {
  border-right: 2px solid #333;
  border-radius: 2px;
  display: block;
  width: 100%;
  transition: all .3s ease;
}
.level1 a::after {
  content:"\e766";
  font-family: 'entypo', sans-serif;
  position: absolute;
  transition: all .3s ease;
  right: -8px;
  color: transparent;
}
.level1 a:hover {
  border-right: 10px solid transparent;
}
.level1 a:hover::after {
  right: 0px;
  color: #333;
}
.hide {
  position: absolute;
  left: -9999px;
}
.hide + label {
  position: relative;
  display: block;
}
.hide + label img {
    position: absolute;
    height: 30px;
    top: 5px;
    left: -36px;
}
.hide + label::before {
  content:'';
  height: 2px;
  background: #333;
  border-radius: 0 0 2px 2px;
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: all .3s ease;
}
.hide + label::after {
  content:"\e764";
  font-family: 'entypo', sans-serif;
  position: absolute;
  transition: all .3s ease;
  right: -3px;
  top: 8px;
  color: transparent;
}

.hide + label:hover::after {
  top: 0px;
  color: #333;
}
.hide + label ~ p {
  position: relative;
  transition: all .3s ease;
  border-radius: 2px;
  top: -10px;
  opacity: 0; 
}
.hide:checked + label::before {
  height: 40px;
  background: transparent;
  bottom: -40px;
}
.hide:checked + label::after {
  top: 0px;
  color: #333;
  transform: rotateX(-180deg);
}
.hide:checked + label + p {
  top: 0;
  opacity: 1;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
<div>Название:
  <ul>
    <li class="level1"><a href="#">Пункт 1</a></li>
    <li class="level1"><a href="#">Пункт 2</a></li>
    <li class="level1"><a href="#">Пункт 3</a></li>
    <li>
      <input id="hd-2" class="hide" type="checkbox" />
      <label for="hd-2"><img src="https://ru.wikipedia.org/static/favicon/wikipedia.ico" alt="Читать далее" /> Wiki</label>
      <p class="level1"><a href="#">Пункт 4</a></p>
    </li>
  </ul>
</div>

1
  • да, вот так все ок- спасибо! с абзацем все хорошо))
    – Вася
    8 апр 2016 в 7:14

Ваш ответ

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

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