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

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: