HTML ve CSS İle Akordion Dikey Menü - Bilişim Konuları

HTML ve CSS İle Akordion Dikey Menü

Bu menü örneğimizde html ve css ile birlikte dikey olarak bir akerdion menü yapacağız. Menümüzün CSS ve HTML kodları aşağıdaki gibidir. Bu kodları yeni bir html sayfasına kopyaladığınızda menü çalışacaktır. Menünün elemanlarını kendi isteğinize göre değiştirebilirsiniz.

Menünün Çalışan Hali:

HTML ve CSS kodları:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<style type="text/css">

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,300);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: 'Montserrat', sans-serif;
}
.container {
	width: 100%;
	height: 100%;
}
nav {
	position: fixed;
	display: flex;
	align-items: flex-start;
	width: 20%;
	height: 100%;
	background-color: #111;
}
main {
	position: fixed;
	right: 0;
	width: 80%;
	height: 100%;
	background-color: #fff;
	overflow: auto;
	padding: 40px;
}
h1 {
	font-weight: bold;
	margin-bottom: 50px;
	font-size: 55px;
	text-align: center;
}
p {
	margin-bottom: 20px;
	line-height: 26px;
}
p::first-letter {
	font-size: 200%;
	font-weight: bold;
}
li, ul label.title, ul, a {
	width: 100%;
	color: #FFF;
	font-family: 'Montserrat', 'Open Sans', sans-serif;
	display: block;
	font-weight: bold;
}
ul label {
	height: 35px;
}
ul li{
	height: 35px;
	overflow: hidden;
	transition: all .3s;
}
li {
	display: block;
	background-color: #363636;
}
label.title {
	font-size: 14px;
	background: linear-gradient(#111, #2f2f2f);
	padding: 10px 15px;
	cursor: pointer;
  transition: all .25s;
}
a{
	font-size: 12px;
	text-decoration: none;
	color: #FFF;
	display: block;
	padding: 10px 25px;
	transition: all .25s;
}
a:hover {
	background-color: #444;
  box-shadow: inset 5px 0px 0px 0px #fff;
}
label:hover {
	text-shadow: 0px 0px 10px #fff;
}
input[type="radio"] {
	display: none;
}
#edit:checked + li, #archive:checked + li, #tools:checked + li, #preferences:checked + li {
	height: 179px;
}
i {
	margin-right: 12px;
}
@media screen and (max-width: 600px){
	nav {
		width: 100%;
		position: relative;
	}
	main {
		width: 100%;
		position: relative;
	}
}



</style>
<div class="container">
		<nav class="menu">
			<ul>
				<input type="radio" name="menu" id="archive" checked>
				<li>
					<label for="archive" class="title"><i class="fa fa-folder"></i>Arşiv</label>
					<a href="#">Yeni Dosya</a>
					<a href="#">Dosya Aç</a>
					<a href="#">Kaydet</a>
					<a href="#">Çıkış</a>
				</li>
				<input type="radio" name="menu" id="edit">
				<li>
					<label for="edit" class="title"><i class="fa fa-edit"></i>Düzenle</label>
					<a href="#">Kopyala</a>
					<a href="#">Kes</a>
					<a href="#">Yapıştır</a>
					<a href="#">Geri Al</a>
				</li>
				<input type="radio" name="menu" id="tools">
				<li>
					<label for="tools" class="title"><i class="fa fa-gavel"></i>Araçlar</label>
					<a href="#">Araç1</a>
					<a href="#">Araç2</a>
					<a href="#">Ara31</a>
					<a href="#">Araç4</a>
				</li>
				<input type="radio" name="menu" id="preferences">
				<li>
					<label for="preferences" class="title"><i class="fa fa-gears"></i>Ayarlar</label>
					<a href="#">Tarayıcı</a>
					<a href="#">Ayarlar</a>
					<a href="#">Sayfalar</a>
					<a href="#">Temalar</a>
				</li>
			</ul>
		</nav>

	</div>
</body>
</html>

Buradan İndirebilirsiniz.

Bu Yazıya Tepkin Nedir?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Yorum Yap