Css вертикальный список: html — Вертикальное меню на уровне с header

CSS-трюк: двойные бордюры-разделители вертикального меню

Когда при верстке требуется создать меню с разделителем, я использую замечательную технику, которую когда-то давно предложил Юрий «akella» Артюх.

Недавно я столкнулся с очень похожей, но более сложной задачей — мне нужно было сверстать вертикальное меню, разделителем которого является двойная линия, состоящая из двух разных цветов (синий и белый):

Возможные способы решения задачи:

• использовать изображение;
• использовать только CSS.

В решении необходимо предусмотреть, что:

• высота пункта списка может меняться, т.е. текст может быть в несколько строк;
• часть текста может быть за пределами тега ссылки.

Проблемы при использовании изображения

Объясню, почему решение в виде использования изображения в качестве бордюра не подходит в данном случае.

Структура HTML-кода нашего меню максимально проста:

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">О компании</a></li>
	<li><a href="#">Статьи</a></li>
	<li><a href="#">Отзывы</a></li>
	<li><a href="#">Фотографии</a></li>
	<li><a href="#">Вопросы</a></li>
	<li><a href="#">Контакты</a></li>
</ul>

По идее, используя технику Юры Артюха, можно было бы разделитель сделать изображением и поставить его фоном к элементу <li>. Но дело в том, что в списке у каждого пункта еще используется изображение-маркер, и если это изображение ставить фоном тега <a>, тогда возникают следующие проблемы:

1. Если в меню появится многострочный пункт, тогда меню станет некрасивым (не хватает одинакового отступа слева у текста в каждой строке):

2. Первую проблему можно было бы решить, сделав ссылку блочный элементом (a {display:block}), однако при этом возникнет другая проблема — если после ссылки добавить текст, то он перенесется на новую строку, а этого также необходимо избежать:

Решение с помощью CSS

Мое решение с использованием чистого CSS позволяет избежать вышеописанных проблем.

CSS-код будет выглядеть нижеследующим образом. Основные для нашей задачи стили я прокомментирую:

ul {
	width: 150px;
	padding: 0 6px;
	background: #F2F7FD url(bg.gif) 0 100% repeat-x;
  border: 1px solid #C0D7FB;
  font-weight: bold;
	overflow: hidden; /* необходимо для того, чтобы
	спрятать верхний бордюр у первого пункта и
	нижний бордюр у последнего пункта */
}
li {
	list-style: none;
  background: url(bullet.
  gif) 4px 8px no-repeat;
	padding: 5px 0 8px 22px;
  border-top: 1px solid #C0D7FB; /* синяя линия */
  border-bottom: 1px solid #FFF; /* белая линия */
  margin: -1px 0 -2px; /* "нахлестываем" на предыдущий и следующий пункт,
	в результате чего и достигается нужный эффект */
	height: 1%; /* для устранения бага в IE6 и IE7 */
}

Для наглядности вы можете посмотреть на живой пример.

Вот, собственно, и все. Решение кроссбраузерное, надеюсь, кому-нибудь пригодится.

* * *

Для качественного сайта с большой аудиторией лучше использовать VPS хостинг (VPS или VDS — это виртуальный выделенный сервер), который, по сравнению с обычным виртуальным хостингом, имеет большие преимущества в плане ресурсов и программной части.

Древовидный список на CSS • Про CSS

Как-то мне потребовалось сделать иерархическое представление структуры проекта, для реализации был выбран CSS.

Вот что получилось:

Это можно сделать за несколько простых шагов.

Для начала создаем желаемую структуру из вложенных списков и заголовков для них:

Узлы уровней создаются с помощью заголовков h2 — H6. То есть перед каждым новым ветвлением должен быть заголовок. Чтобы они все вели себя одинаково c точки зрения древовидного списка, добавляем им общий класс .header.

Добавляем отступы и рамки, чтобы видеть структуру.

И вот теперь самое интересное: добавляем полоски, начнем с горизонтальных.

LI:before,
.header:before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: .5em;
  width: 15px;
  height: 0;
  border-bottom: 1px solid #333;
}

Они сделаны абсолютно позиционированными псевдоэлементами. Здесь можно было бы обойтись и inline-block с вертикальным выравниванием, но position: absolute; в сочетании с bottom позволит нам сделать вертикальные линии, направленные вверх.

Чтобы полоски не выпадали из контекста, пунктам списка и заголовкам нужно задать относительное позиционирование, а чтобы они не заезжали на текст — паддинг слева тем же элементам.

LI,
.header {
  position: relative;
  padding-left: 1. 2em;
}

Пока выглядит странно. Большинство полосок встало на места, но некоторые болтаются где попало, потому, что все горизонтальные линии спозиционированны относительно нижнего края элементов.

Теперь добавим вертикальные линии:

.header:last-of-type:before,
LI:last-child:before {
  height: 1000px;
  border: 1px solid #333;
  border-width: 0 0 1px 1px
}

Получится лес вертикальных линий, от которого легко избавиться, задав всем спискам overflow: hidden;, вот результат:

И теперь в структуре хорошо видно дублирование некоторых линий.

Оно происходит из-за того, что заголовки (

.header) находятся внутри элементов списка (LI), таким образом они получают две направляющих.

Добавим спискам с заголовками класс .p-has-headers и покрасим разные направляющие разными цветами, чтобы увидеть что происходит.

.p-has-headers > LI:before {
  border-color: red;
}
.header:before,
.header:last-of-type:before{
  border-color: green;
}

Направляющие обычных пунктов списка остались черными, направляющие списков с заголовками стали красными, направляющие заголовков — зелеными.

По красным хорошо видно, что некоторые из них находятся не там. Например, на крайней слева вертикали горизонтальные линии совсем мимо, потому, что линии спозиционированы от нижнего края LI.

Это отлично работает в простом списке, но совсем не подходит для списка с заголовком, потому что в этом случае ветка должна начинаться на уровне заголовка, как это делают зеленые.

Именно поэтому стили прописывались и для LI, и для .header. Если есть заголовок — ветка вверх должна вести от него, а не от конца списка. Таким образом, в списках, пункты которого содержат заголовки и которые мы пометили классом .p-has-headers, можно выключить направляющие для непосредственных наследников кодом вроде UL > LI.

Код:

.p-has-headers > LI:before {
  content: none;
}

Результат:

Получилась довольно простая конструкция, главное — не запутаться в тегах списков, и каждую новую ветку начинать с заголовка.

Метки:

эксперименты

←Css-селекторы, часть 2Текстовые эффекты→

Наверх

html — Вертикальный список в горизонтальном списке

Задавать вопрос

спросил 12 лет, 7 месяцев назад

Изменено 7 лет, 3 месяца назад

Просмотрено 9к раз

Я пытаюсь создать базовую навигацию и хочу иметь горизонтальный список с вертикальным списком элементов:

 Заголовок 1 Заголовок 2 Заголовок 3
 -Sub 1 -Sub 1 -Sub 1
 -Sub 2 -Sub 2 -Sub 2
 -Sub 3 -Sub 3 -Sub 3
 

Снимаю по этой разметке или что-то похожее:

 

    
Заголовок 1
    <ул>
        
Абкдефги
        
Jklmnopqr
        
stuvwzyz
    
    
    
Заголовок 2
    <ул>
        
Абкдефги
        
Jklmnopqr
        
 stuvwzyz
    
    
    
Заголовок 3
    <ул>
        
Абкдефги
        
Jklmnopqr
        
stuvwzyz
    
    

 

Я стараюсь избегать плавающих элементов div для каждого раздела заголовка.

Я пытался использовать два класса css для uls, с внешним набором display:inline и внутренним display:block , но я не могу заставить его работать.

Как мне это сделать, или я должен плавать div?

• html
• css

Вы можете плавать первый уровень li s (чтобы избежать «плавающих div») или использовать display: inline-block для первого уровня ли с. Принимая во внимание, что float будет работать для IE6+, тогда как

inline-block ограничен только теми элементами, которые обычно отображают inline .

Базовая демонстрация для первого предложения (поплавок первого уровня li s):

 ul {
   ширина: 90%;
   поле: 0 авто;
 }
 уль > ли {
   плыть налево;
   ширина: 32%;
 }
 ул > ли > ул {
   дисплей: блок;
   ширина: 100%;
 }
 ул > ли > ул > ли {
   дисплей: блок;
   поплавок: нет;
 } 

 <ул>
  
Заголовок 1
    <ул>
      
Абкдефги
      
      
Jklmnopqr
      
      
stuvwzyz
      
    
  
  
Заголовок 2
    <ул>
      
Абкдефги
      
      
Jklmnopqr
      
      
stuvwzyz
      
    
  
  
Заголовок 3
    <ул>
      
Абкдефги
  
      
Jklmnopqr
      
      
stuvwzyz
      
    
  

 

Базовая демонстрация для второго ( дисплей: встроенный блок для первого уровня li s) предложение:

 ul {
  ширина: 90%;
  поле: 0 авто;
}
уль ли {
  отображение: встроенный блок;
  ширина: 32%;
}
уль ли уль {
  ширина: 100%;
}
уль ли уль ли {
  дисплей: блок;
} 

 <ул>
  
Заголовок 1
    <ул>
      
Абкдефги
      
      
Jklmnopqr
      
      
stuvwzyz
      
    
  
  
Заголовок 2
    <ул>
      
Абкдефги
      
      
Jklmnopqr
      
      
stuvwzyz
      
    
  
  
Заголовок 3
    <ул> 
      
Абкдефги
      
      
Jklmnopqr
      
      
stuvwzyz
      
    
  

 

3

попробуйте ниже код, я потратил немного времени на то, чтобы кому-нибудь это нужно

 

<тело>
<стиль>
   . уль ли {
  плыть налево;
  ширина: 30%;
}
.ul>ли ул{
   дисплей:блок;
   поле слева:-30px;
}
.ul>ли ul>ли{
   дисплей:блок;
   поплавок: нет;
}
.ul>ли а{
    белый цвет;
}
нижний колонтитул {
    отступ: 20 пикселей;
    низ отступа: 100 пикселей;
    фон: #333;
    белый цвет;
}

<нижний колонтитул>
<дел>
<ул>
   

       набер
         <ул>
            
ссылка
            
ссылка
            
ссылка
         
   
   

       достум
         <ул>
            
биррр
            
ики
            
об
         
   
   

       Насылсын
         <ул>
            
бир
            
ики
            
об