Kako da napravite horizontalni navigacioni meni (How to create a horizontal navigation menu)

Saturday, April 16, 2016

Kako da napravite horizontalni navigacioni meni (How to create a horizontal navigation menu)

Pitanje: kako da napravite horizontalni navigacioni meni?

Resenje: podesavanjem elemenata li da budu u istom redu, pomocu svojstva display: inline.

Primer:

HTML kod

<!DOCTYPE html>
<html>
<head>
<title>Kako da napravite horizontalni navigacioni meni</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>Horizontalni navigacioni meni</h1>
<div id="navigacija">
<ul>
<li><a href="#">Japan</a></li>
<li><a href="#">Italija</a></li>
<li><a href="#">Austrija</a></li>
<li><a href="#">Spanija</a></li>
</ul>
</div>
</body>

</html>

CSS kod

body {
font-family: Georgia, Times, 'Times New Roman', serif;
padding: 15px;
}

#navigacija {
font-size: 16px;
}

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

#navigacija li {
display: inline;
}

#navigacija a:link, #navigacija a:visited {
padding: 5px 15px 5px 15px;
color: #ffffff;
background-color: #207A96;
text-decoration: none;
border: 1px solid #2AAFDB;
}

#navigacija a:hover {
background-color: #2AAFDB;
color: #FFFFFF;

}

Rezultat:

Question: how to create a horizontal navigation menu?

Solution: setting elements li so they appear in the same row, using property. display: inline.

Example:

HTML code

<!DOCTYPE html>
<html>
<head>
<title>How to create a horizontal navigation menu</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>Horizontal navigation menu</h1>
<div id="navigation">
<ul>
<li><a href="#">Japan</a></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;
padding: 15px;
}

#navigation {
font-size: 16px;
}

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

#navigation li {
display: inline;
}

#navigation a:link, #navigation a:visited {
padding: 5px 15px 5px 15px;
color: #ffffff;
background-color: #207A96;
text-decoration: none;
border: 1px solid #2AAFDB;
}

#navigation a:hover {
background-color: #2AAFDB;
color: #FFFFFF;
}

Result: