WEB-нотатки - записник он-лайн

Приклад меню на CSS3 без зображень.

Почнемо з простого горизонтального списку:

Code

<div id="menu">
  <ul>
  <li><a class="active" href="index.html">Домашня</a></li>
  <li><a href="menu.html">Меню</a></li>
  <li><a href="project.html">Проект</a></li>
  <li><a href="affiliates.html">Контакти</a></li>
  <li><a href="contact.html">Про сайт</a></li>
  </ul>
</div>

Code

body {
  background: #ddd;
  margin: 30px;
}
#menu {
  float: left;
  padding: 0;
  margin: 0;
}
#menu ul {
  padding: 0;
  margin: 0;
  float: left;
}
#menu li {
  float: left;
  list-style: none;
  background: none;
}
#menu a { outline: none; }
#menu li a:link, #menu li a:visited {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  display: block;
  color: #262626;
  text-decoration: none;
  text-transform: capitalize;
  padding: 12px 28px;
}

Тепер додамо градієнт для пунктів меню а також тінь для тексту:

Code

#menu li a:link, #menu li a:visited {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  display: block;
  color: #262626;
  padding: 12px 28px;
  text-decoration: none;
  text-transform: capitalize;

  /* CSS3 Тінь тексту */
  text-shadow: 0px 1px 1px #fff;

  /* CSS3 Градієнт*/
  background-image: -moz-linear-gradient(top, #cacaca, #848484);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}

Тепер додамо з двох сторін заокруглення за допомогою псевдокласів first-child и last-child:

Code

#menu li:first-child a {
  /* Rounded Corners */
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
}
#menu li:last-child a {
  /* Rounded Corners */
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
}

Додамо ще декілька тіней і горизонтальних градієнтів границь, в дівах додамо тіні і заокруглення посиланнь:

Code

#menu {
  float: left;
  padding: 0;
  margin: 0;

  /* Box Shadow */
  box-shadow: 0 1px 0 #000;
  -moz-box-shadow: 0 1px 0 #000;
  -webkit-box-shadow: 0 1px 0 #000;

  /* Rounded Corners */
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;

  /* Rounded Corners */
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
}

Тепер додамо один піксель відступу праворуч від тега li, в цьому просторі буде відображено фон для тега ul:

Code

#menu li {
  float: left;
  list-style: none;
  background: none;
  margin-right: 1px;
}

В якості фону для тега ul додамо градієнт:

Code

#menu ul {
  border-top: #f3f3f3 1px solid;
  padding: 0;
  margin: 0;
  float: left;

  /* Градієнт для фону ul */
  background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}

Тепер додамо стилі для hover і active:

Code

#menu li a:hover {
  cursor: pointer;
  color: #fff;
  text-shadow: 0px -1px 1px #000;
  background-image: -moz-linear-gradient(top, #929292, #545454);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}

Також для активного стану:

Code

a.active:link, a.active:active, a.active:visited {
  color: #fff !important;
  text-shadow: 0px -1px 1px #000!important;
  background-image: -moz-linear-gradient(top, #444, #666)!important;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;

  box-shadow: inset 0 0 10px #000;
  -moz-box-shadow: inset 0 0 10px #000;
  -webkit-box-shadow: inset 0 0 10px #000;
}

До кожного пункту меню, до посилання, необхідно додати клас active на кожній сторінці де відповідно має бути показано що саме на цій сторінці ви знаходитесь.

Глянемо на всі стилі меню разом:

Code

body {
  background: #ddd;
  margin: 30px;
}
#menu {
  float: left;
  padding: 0;
  margin: 0;

  /* Тінь блоку */
  box-shadow: 0 1px 0 #000;
  -moz-box-shadow: 0 1px 0 #000;
  -webkit-box-shadow: 0 1px 0 #000;

  /* Заокруглення вуглів */
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;

  /* Заокруглення вуглів */
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
}
#menu ul {
  border-top: #f3f3f3 1px solid;
  padding: 0;
  margin: 0;
  float: left;

  /* Градієнт фону */
  background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}
#menu li {
  float: left;
  list-style: none;
  background: none;
  margin-right: 1px;
}
#menu a { outline: none; }
#menu li a:link, #menu li a:visited {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  display: block;
  color: #262626;
  padding: 12px 28px;
  text-decoration: none;
  text-transform: capitalize;

  /* CSS3 Тінь тексту */
  text-shadow: 0px 1px 1px #fff;

  /* CSS3 Грідієнт фону */
  background-image: -moz-linear-gradient(top, #cacaca, #848484);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}
#menu li a:hover {
  cursor: pointer;
  color: #fff;
  text-shadow: 0px -1px 1px #000;

  /* Градієнт фону */
  background-image: -moz-linear-gradient(top, #929292, #545454);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}
#menu li:first-child a, #menu ul {
  /* Заокруглення вуглів */
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
}
#menu li:last-child a, #menu ul {
  /* Заокруглення вуглів */
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
}
a.active:link, a.active:active, a.active:visited {
  color: #fff !important;
  text-shadow: 0px -1px 1px #000!important;
  background-image: -moz-linear-gradient(top, #444, #666)!important;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;

  /* Тінь блоку */
  box-shadow: inset 0 0 10px #000;
  -moz-box-shadow: inset 0 0 10px #000;
  -webkit-box-shadow: inset 0 0 10px #000;
}

Приклад використання: Демо