Website Development Prices

Search Blog

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:




No comments:

Post a Comment

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