1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer

Лекція 7 - Сss : дворівневе праве вертикальне меню

Формування динамічного списку
Двошарове вертикальне меню

Формування динамічного списку

Меню будується на основі багаторівневого списку посилань, аналогічно горизонтальному меню. Сформуємо двостовпчиковий макет сторінки із жорсткою шириною правого блоку та гнучкою шириною лівого. В правий стовпчик вставимо динамічний список, аналогічний списку, що використовувався для формування горизонтального меню. Масштаб меню визначається розміром його шрифту font-size: 12px;. Детальніше із принципами роботи меню можна ознайомитися за допомогою коментарів до його коду.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Три колонки</title>
  <style type="text/css">
.header { background: #D5BAE4; width:100%; right:0;}
.layout { position: relative; /* відносне позиціонування  */ }
.layout DIV { position: absolute; /* Абсолютне позиціонування  */ }

.col1 {
 background: #C7E3E4; /* Колір фону */
 left: 0; /* Лівий край */
 width: 100%;
 float: left;
 
 }
.col2 { 
 background: #E0D2C7; 
 width: 250px; /* Ширина колонки */
 position:absolute;
 margin-right:5;
 right:0;
 }

.col3 { background: #ECD5DE; width: 250px; right: 0; }
body div#menunav ul li ul {
display: none; /*приховування випадаючого меню до вибору верхнього пункту*/
}

div#menunav {
width: 100%; /* ширина блоків div */
border-top: 1px solid #000000; /* лінія поверх div */
/*border-bottom: 1px solid #000000; *//* лінія знизу div */
font-size: 12px; /* размір шрифту */
background-color: #ffffff; /* фоновий колір div #b3b3b3*/
padding: 0 0 0 0px; /* відступ ul від краю контейнера */
} 

div#menunav ul li ul li {
top:-22px;
right:200px;
border-left: 1px solid #0000 три сторони рамки пунктів випадаючого меню */
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}

div#menunav ul li ul li:first-child {
border-top: 1px solid #000000; /* верхній край першого пункту випадаючого меню */
}

div#menunav ul li:hover ul, div#menunav ul li ul:hover {
display: block; /* відображення випадаючого підменю при виборі верхнього
пункту або ж і пункту самого підменю */
}
</style>
 </head>
<body>
  <div class="header">Шапка сайту</div>
    <div class="col1">Колонка 1</div>
   <div class="col2">Меню<br>
   <div id="menunav">
<ul>
<li><a href="#">розділ 1 <br>
                yyyyyyyyyyyyyy<br>
                yyyyyyyyyyyyyy<br>
	    yyyyyyyyyyyyyy<br></a>
<ul>
<li><a href="#">підрозділ 1</a></li>
<li><a href="#">підрозділ 2</a></li>
<li><a href="#">підрозділ 3</a></li>
<li><a href="#">підрозділ 4</a></li>
</ul>
</li>
<li><a href="#">розділ 2</a>
<ul>
<li><a href="#">підрозділ 1</a></li>
<li><a href="#">підрозділ 2</a></li>
<li><a href="#">підрозділ 3</a></li>
<li><a href="#">підрозділ 4</a></li>
</ul>
</li>
<li><a href="#">розділ 3</a>
<ul>
<li><a href="#">підрозділ 1</a></li>
<li><a href="#">підрозділ 2</a></li>
<li><a href="#">підрозділ 3</a></li>
</ul>
</li>
<li><a href="#">розділ 4</a>
<ul>
<li><a href="#">підрозділ 1</a></li>
<li><a href="#">підрозділ 2</a></li>
</ul>
</li>
</ul>
</div>
   </div>
 </body>
</html>
	

Лекція 7 - Сss : дворівневе праве вертикальне меню

Двошарове вертикальне меню

Наступна група правил, яка вставляється перед коментарем на розширення, забезпечує вертикальний характер меню на обох рівнях.

	div#menunav ul {
margin: 0px; /* віддаль між блоками підменю відсутня */
padding : 0px; /* відступ вмісту від межі відсутній */
}
* html div#menunav a {
display: block; /* пункти вкладеного меню виділяються цілком */
text-decoration: none; /* усунення підкреслення посилань */
padding: 0px 0px 0px 0px; /* відступ від країв тексту */
}
div#menunav ul li  {
border-left: 1px solid #000000; 
/* три сторони рамки пунктів випадаючого меню */
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
width: 100px;
left:150px;
}

div#menunav li {
position: relative; /* контекст позиціонування підменю */
list-style-type: none; /* усунення маркерів списку */
background-color: #ffebc6; 
/* фоновий колір елементів меню */
border-right: 1px solid #000000;
 /* роздільники між елементами li */
}
div#menunav li:first-child {
border-top: 1px solid #000000;
/*border-left: 1px solid #000000;*/ 
/* перша вертикальна лінія в меню */
}

div#menunav a {
text-decoration: none; /* усунення підкреслення посилань */
padding: 0px 10px 0px 10px; /* відступ від країв тексту */
color: #006699; /* колір шрифту */
}
div#menunav a:hover {
color: #ff3333; /* колір при захваті пункту мишкою */
}
div#menunav li:hover {
background-color: #ffffff; /* фон пунктів списку */
}
 
div#menunav ul li ul {
position: absolute; /* забороняє підсвітку фону із верхнього меню при виборі*/
right: 228px; /* вирівнює випадаюче меню під верхнє поле*/
width: 124px; /* задає ширину випадаючого меню */
/* відсутність float робить випадаюче підменю вертикальним*/
}

Лекція 7 - Сss : дворівневе праве вертикальне меню

 

Додати коментар


Захисний код
Оновити

Меню

  •  Facebook 

Обрати мову

Хто на сайті

На сайті 169 гостей та відсутні користувачі