#9 - Робота зі списками

Насправді, списки це дуже важлива тема в HTML та CSS. Завдяки спискам ми можемо робити не тільки перелік чогось, але також створювати меню сайту.

Як зробити меню сайту на CSS?

Нижче представлене меню, яке ми можемо створити лише за допомогою CSS та HTML.

Для створення подібного меню вам не потрібні особливі знання. Для початку давайте розглянемо сам HTML:

<ul id="navbar">
  <li><a href="#">Головна</a></li>
  <li><a href="#">Новини</a></li>
  <li><a href="#">Контакти</a>
    <ul>
      <li><a href="#">Адреса</a></li>
      <li><a href="#">Телефон</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">О нас</a></li>
</ul>

Тут усе просто. Є один список і в ньому вкладено ще один список, який розкриватиметься при наведенні миші на потрібну комірку меню. Тепер розглянемо весь CSS код:

#navbar ul{
	display: none;
	background-color: #f90;
	position: absolute;
	top: 100%;
}

#navbar li:hover ul {
	display: block;
}

#navbar, #navbar ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#navbar {
	height: 30px;
	background-color: #666;
	padding-left: 25px;
	min-width: 470px;
}

#navbar li {
	float: left;
	position: relative;
	height: 100%;
}

#navbar li a {
	display: block;
	padding: 6px;
	width: 100px;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

#navbar ul li { float: none; }

#navbar li:hover { background-color: #f90; }

#navbar ul li:hover { background-color: #666; }

Основним моментом є те, що при наведенні миші ми робимо вкладений список блоком: #navbar li:hover ul {display: block}. За допомогою додаткових стилів ми вказуємо, щоб список був у формі блоків і щоб у нього не було значків списку та інших стилів. Таким чином, у нас виходить працююче меню для сайту.

Використання шарів

Уявимо у нас є два блоки, які накладені один на одного. Ми хочемо, щоб перший блок був видно поверх другого блоку, але як це зробити? Тут на допомогу таки приходять шари. Розглянемо все на прикладі.

У нас є два блоки, які розташовані в такий спосіб:

Ми бачимо, що другий блок просто перекрив перший блок. На даний момент у нас у коді ще не прописані шари і виглядає наш CSS код наступним чином:

#first {
	background: #e56868;
	width: 100px;
	height: 100px;
	position: relative;
}

#second {
	background: #6db8e3;
	width: 100px;
	height: 100px;
	position: relative;
	top: -50px;
	right: -50px;
}

Тепер додамо нову властивість до першого блоку: z-index: 1. Оскільки наш другий блок взагалі немає ніякого шару, він автоматично дорівнює нульовому шару. Перший блок має шар на 1 вище, а значить він відображатиметься поверх другого блоку. Важливо також відзначити, що обидва блоки повинні мати властивість position: relative. Ось що вийшло:

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