Website Development Prices

Search Blog

Monday, April 4, 2016

Kako da napravite navigacioni meni sa podnavigacijom (How to create a navigation menu with subnavigation)

Pitanje: kako da napravite navigacioni meni sa podnavigacijom?

Resenje: dodacemo ugnjezdenu listu i stilizovati boje, ivice i svojstva veza stavki te nove liste. 

Primer:

HTML kod

<!DOCTYPE html>
<html>
<head>
<title>Kako da napravite navigacioni meni sa podnavigacijom</title>

<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>


<body>
<h1>Navigacioni meni sa podnavigacijom</h1>
<div id="navigacija">
<ul>
<li><a href="#">Japan</a>
<ul>
<li><a href="#">Honda</a></li>
<li><a href="#">Kawasaki</a></li>
<li><a href="#">Suzuki</a></li>
</ul>
</li>
<li><a href="#">Italy</a></li>
<li><a href="#">Austria</a></li>
<li><a href="#">Spain</a></li>
</ul>
</div>
</body>


</html>

CSS kod

body {
  font-family: Georgia, Times, 'Times New Roman', serif
}

#navigacija {
  width: 200px;
}

#navigacija ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigacija li {
  border-bottom: 1px solid #9FD3ED;
}

#navigacija li a:link, #navigacija li a:visited {
  font-size: 90%;
  display: block;
  padding: 10px 0 10px 12px;
  border-left: 12px solid #154171;
  border-right: 1px solid #154171;
  background-color: #1086B5;
  color: #FFFFFF;
  text-decoration: none;
}

#navigacija li a:hover {
  background-color: #154171;
  color: #FFFFFF;
}

#navigacija ul ul {
margin-left: 12px;
}

#navigacija ul ul li {
  border-bottom: 1px solid #154171;
  margin:0;
}

#navigacija ul ul a:link, #navigacija ul ul a:visited {
  background-color: #9FD3ED;
  color: #154171;
}

#navigacija ul ul a:hover {
  background-color: #154171;
  color: #FFFFFF;

}


Rezultat:


Question: how to create a navigation menu with subnavigation?

Solution: we'll add the nested list and we'll stylize the color, edges and properties of this new  items list.

Example:

HTML code

<!DOCTYPE html>
<html>
<head>
<title>How to create a navigation menu with subnavigation</title>

<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1>Navigation menu with subnavigation</h1>
<div id="navigation">
<ul>
<li><a href="#">Japan</a>
<ul>
<li><a href="#">Honda</a></li>
<li><a href="#">Kawasaki</a></li>
<li><a href="#">Suzuki</a></li>
</ul>
</li>
<li><a href="#">Italy</a></li>
<li><a href="#">Austria</a></li>
<li><a href="#">Spain</a></li>
</ul>
</div>
</body>


</html>

CSS code

body {
  font-family: Georgia, Times, 'Times New Roman', serif
}

#navigation {
  width: 200px;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation li {
  border-bottom: 1px solid #9FD3ED;
}

#navigation li a:link, #navigation li a:visited {
  font-size: 90%;
  display: block;
  padding: 10px 0 10px 12px;
  border-left: 12px solid #154171;
  border-right: 1px solid #154171;
  background-color: #1086B5;
  color: #FFFFFF;
  text-decoration: none;
}

#navigation li a:hover {
  background-color: #154171;
  color: #FFFFFF;
}

#navigation ul ul {
margin-left: 12px;
}

#navigation ul ul li {
  border-bottom: 1px solid #154171;
  margin:0;
}

#navigation ul ul a:link, #navigation ul ul a:visited {
  background-color: #9FD3ED;
  color: #154171;
}

#navigation ul ul a:hover {
  background-color: #154171;
  color: #FFFFFF;

}

Result:




No comments:

Post a Comment

Note: Only a member of this blog may post a comment.