Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!
Simgeli Kenar Çubuğu
HTML ve CSS kullanarak simgeler içeren bir yan gezinme menüsünün nasıl oluşturulacağını göstereceğim..
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif;}
.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 16px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
}
.sidebar a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#home"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#services"><i class="fa fa-fw fa-wrench"></i> Services</a>
<a href="#clients"><i class="fa fa-fw fa-user"></i> Clients</a>
<a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>
<div class="main">
<h2>Sidebar with Icons</h2>
<p>This side navigation is of full height (100%) and always shown.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>Simgelerle Kenar Çubuğu Nasıl Oluşturulur
Adım 1) HTML'yi ekleyin:
Kod:
<!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The sidebar -->
<div class="sidebar">
<a href="#home"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#services"><i class="fa fa-fw fa-wrench"></i> Services</a>
<a href="#clients"><i class="fa fa-fw fa-user"></i> Clients</a>
<a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>Adım 2) CSS'yi ekleyin:
Kod:
/* Style the sidebar - fixed full height */
.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 16px;
}
/* Style sidebar links */
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
}
/* Style links on mouse-over */
.sidebar a:hover {
color: #f1f1f1;
}
/* Style the main content */
.main {
margin-left: 160px; /* Same as the width of the sidenav */
padding: 0px 10px;
}
/* Add media queries for small screens (when the height of the screen is less than 450px, add a smaller padding and font-size) */
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
Son düzenleme:
Konu Sahibi
Konu Sahibi
Rica Ederim..Yorumlar İçin Teşekkürler..Paylaşım için teşekkürler, ellerine sağlık
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
