Check out the horizontal navigation menu

C

cadash20142013-12-29 14:47:01

css

cadash2014, 2013-12-29 14:47:01

Greetings! Please evaluate the horizontal menu on html css. I'm just still learning and I need criticism from knowledgeable people, point out mistakes, where something can be simplified, and so on.
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;
}

link with example

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vladlen Grachev, 2013-12-29
@cadash2014

Menu as a menu.
Only for the leftmost button (with a house) make all the backgrounds in one picture (sprites). So as not to twitch at the first interaction.