HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
Yan Gezinme Düğmeleri
CSS ile üzerine gelinebilir yan gezinme düğmelerinin nasıl oluşturulacağını görelim..
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">
<style>
#mySidenav a {
position: absolute;
left: -80px;
transition: 0.3s;
padding: 15px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
}
#mySidenav a:hover {
left: 0;
}
#about {
top: 20px;
background-color: #04AA6D;
}
#blog {
top: 80px;
background-color: #2196F3;
}
#projects {
top: 140px;
background-color: #f44336;
}
#contact {
top: 200px;
background-color: #555
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="#" id="about">About</a>
<a href="#" id="blog">Blog</a>
<a href="#" id="projects">Projects</a>
<a href="#" id="contact">Contact</a>
</div>
<div style="margin-left:80px;">
<h2>Hoverable Sidenav Buttons</h2>
<p>Hover over the buttons in the left side navigation to open them.</p>
</div>
</body>
</html>Hoverable Sidenav Nasıl Oluşturulur
Adım 1) HTML'yi ekleyin:
Kod:
<div id="mySidenav" class="sidenav">
<a href="#" id="about">About</a>
<a href="#" id="blog">Blog</a>
<a href="#" id="projects">Projects</a>
<a href="#" id="contact">Contact</a>
</div>Adım 2) CSS'yi ekleyin:
Kod:
/* Style the links inside the sidenav */
#mySidenav a {
position: absolute; /* Position them relative to the browser window */
left: -80px; /* Position them outside of the screen */
transition: 0.3s; /* Add transition on hover */
padding: 15px; /* 15px padding */
width: 100px; /* Set a specific width */
text-decoration: none; /* Remove underline */
font-size: 20px; /* Increase font size */
color: white; /* White text color */
border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}
#mySidenav a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
}
/* The about link: 20px from the top with a green background */
#about {
top: 20px;
background-color: #04AA6D;
}
#blog {
top: 80px;
background-color: #2196F3; /* Blue */
}
#projects {
top: 140px;
background-color: #f44336; /* Red */
}
#contact {
top: 200px;
background-color: #555 /* Light Black */
}
Konu Sahibi
Konu Sahibi
Rica Ederim..Yorumlar İçin Teşekkürler..Paylaşım için teşekkürler, ellerine sağlık
