@cadash2014

Оцените горизонтальное навигационное меню

Приветствую! Прошу оценить горизонтальное меню на html css. Я только еще учусь и мне нужна критика знающих людей, указать на ошибки, где-что можно упростить и тд.
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="StyleSheet.css" rel="stylesheet" />
  <title></title>
</head>
<body>
  <nav>
    <ul>
      <li class="width">
        <a class="noborder" target="_self" href="#"><div class="pic1"></div></a>
      </li>
      <li>
        <a target="_self" href="#">Пример-1</a>
      </li>
      <li>
        <a target="_self" href="#">Пример-2</a>
      </li>
      <li>
        <a target="_self" href="#">Пример-3</a>
      </li>
      <li>
        <a target="_self" href="#">Пример-4</a>
      </li>
      <li>
        <a target="_self" href="#">Пример-5</a>
      </li>
      <li class="noborder">
        <a target="_self" href="#">Пример-6</a>
      </li>
    </ul>
  </nav>
</body>
</html>

css
body {
  background-color: #fff;
  font-family: Arial, Verdana, sans-serif;
}

nav {
  width: 980px;
  height: 40px;
  border-radius: 5px;
  background-image: linear-gradient(to bottom,#727272,#4c4c4c 50%,#3b3b3b 50%,#343434);
  font-size: 16px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav li {
  width: 150px;
  float: left;
  border-right: 1px solid #000;
}

nav a {
  text-align: center;
  padding: 0 10px;
  line-height: 40px;
  display: block;
  color: #fff;
  text-decoration: none;
  border-left: 1px solid #808080;
}

.noborder {
  border: none;
}

li a:hover {
  background-image: linear-gradient(to bottom,#232728,#0e1010);
}

li a:active {
  background: radial-gradient(ellipse at center,#454545 30%,#0f0f0f 110%);
}

.width {
  width: 70px;
}

.pic1:hover {
  background-image: url('home_hover.png');
}

.pic1:active {
  background-image: url('home_active.png');
}

div.pic1 {
  background-image:url('home.png');
  height: 40px;
  width: 70px;
}

a.noborder {
  padding: 0px;
}


ссылка с примером
  • Вопрос задан
  • 3042 просмотра
Решения вопроса 3
Меню как меню.
Только для самой левой кнопки (с домиком) сделайте все фоны в одной картинке (спрайтами). Чтоб не дергалось при первом взаимодействии.
Ответ написан
HaruAtari
@HaruAtari
Еще в самом правом элементе при ховере перекрашивается не весь пункт. Справа остается тонкая полоска старого фона.
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
У Вас ширина пункта меню задана жестко:
nav li {
  width: 150px;
  float: left;
  border-right: 1px solid #000;
}

Если текст пункта меню будет длиннее - текст съедет вниз. Возможно стоит заменить на:
nav li {
  min-width: 150px;
  float: left;
  border-right: 1px solid #000;
}

Ну а в целом, Вам не кажется, что нужно показывать меню вместе со страницей? А код прятать в спойлеры, очень не удобно листать туда-обратно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы