Örnek 1:
Örnek 2 :
Eğer bunları beğenmediyseniz, buraya bakabilirsiniz.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Navbar Örnekleri.</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Keşfet</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>
</body>
</html>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Navbar Örnekleri.</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Keşfet</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>
</body>
</html>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}Eğer bunları beğenmediyseniz, buraya bakabilirsiniz.
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.