Bu yazımızda Css3 kullanarak çok renkli UL-Lİ tabanlı menü yapacağız. Menü üzerinde Css3 ile hazırladığımız renk paletlerimizi yerleştireceğiz. Alt menüleri ise gösterip göstermeme konusunda tercih kullanabiliriz.
Hangi renkte menü görmek istiyorsak menü üzerinde ki arkaplan renklerine tıklayarak alttaki menü' lerimizi o renk kodunda göreceğiz.
HTML KODLARI
İndex.html
Önce Css dosyalarımızı projemize aktaralım.
<link href="css/style.css" rel="stylesheet" type="text/css" />
Menü background renklerimizi belirleyen kodlarımızı yazalım.
<center> <div class="container"> <span id="red"></span> <span id="orange"></span> <span id="green"></span> <span id="pink"></span> <span id="blue"></span> <span id="grey"></span> <span id="violet"></span> <span id="indigo"></span>
<div class="colorScheme">
<a href="#red" class="red"></a> <a href="#orange" class="orange"></a> <a href="#green" class="green"></a> <a href="#pink" class="pink"></a> <a href="#blue" class="blue"></a> <a href="#grey" class="grey"></a> <a href="#violet" class="violet"></a> <a href="#indigo" class="indigo"></a> </div>
<ul id="nav"> <li><a href="http://www.cahitsoyman.blogspot.com/" target="_blank">Anasayfa </a></li> <li><a class="hsubs" href="#">Blogger</a> <ul class="subs"> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> <li><a href="#">Submenu 1-4</a></li> <li><a href="#">Submenu 1-5</a></li> </ul> </li> <li><a class="hsubs" href="#">Photoshop</a> <ul class="subs"> <li><a href="#">Submenu 2-1</a></li> <li><a href="#">Submenu 2-2</a></li> <li><a href="#">Submenu 2-3</a></li> <li><a href="#">Submenu 2-4</a></li> <li><a href="#">Submenu 2-5</a></li> <li><a href="#">Submenu 2-6</a></li> <li><a href="#">Submenu 2-7</a></li> <li><a href="#">Submenu 2-8</a></li> </ul> </li> <li><a class="hsubs" href="#">Wordpress</a> <ul class="subs"> <li><a href="#">Submenu 3-1</a></li> <li><a href="#">Submenu 3-2</a></li> <li><a href="#">Submenu 3-3</a></li> <li><a href="#">Submenu 3-4</a></li> </ul> </li> <li><a class="hsubs" href="#">Görsel Eğitim</a> <ul class="subs"> <li><a href="#">Submenu 4-1</a></li> <li><a href="#">Submenu 4-2</a></li> <li><a href="#">Submenu 4-3</a></li> </ul> </li> <li><a class="hsubs" href="#">Webmaster</a> <ul class="subs"> <li><a href="#">Submenu 5-1</a></li> <li><a href="#">Submenu 5-2</a></li> <li><a href="#">Submenu 5-3</a></li> </ul> </li> <li><a href="http://cahitsoyman.blogspot.com/2016/02/css3-ile-cok-renkli-menu-yapimi.htm/" target="_blank">Geri</a></li>
</ul> </div> </body> </html>
CSS KODLARI
Style.css
#Nav etiketi ile sirasız menü listemizin genişlik, yükseklik, background ve diğer marjlarını belirleyelim.
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background-color: #000000;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
display: table;
padding: 10px;
position: relative;
text-align: center;
}
#nav ul {
background-color: red;
border:1px solid red;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
padding: 20px 0 10px;
position: absolute;
top: -9999px;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#nav li {
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
font-size: 16px;
padding: 7px 20px;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#nav li:hover > a {
background-color: red;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
}
#nav li:hover > a.hsubs {
border-radius: 5px 5px 0 0;
}
#nav li:hover ul.subs {
left: 0;
top: 34px;
width: 180px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
}
#nav ul li {
width: 100%;
}
#nav ul li:hover > a {
background-color: #222222 !important;
border-radius: 5px 5px 5px 5px;
}
Renk kodlarımızı yazalım.
.colorScheme {
height: 32px;
list-style: none outside none;
margin: 0 auto 45px;
width: 320px;
}
.colorScheme a {
cursor: pointer;
float: left;
height: 30px;
margin: 0 5px;
width: 30px;
}
.colorScheme .red {
background-color: red;
}
.colorScheme .orange {
background-color: orange;
}
.colorScheme .green {
background-color: green;
}
.colorScheme .pink {
background-color: pink;
}
.colorScheme .blue {
background-color: blue;
}
.colorScheme .indigo {
background-color: indigo;
}
.colorScheme .violet {
background-color: violet;
}
.colorScheme .grey {
background-color: grey;
}
#red:target ~ #nav ul {
background-color: red;
border: 1px solid red;
}
#orange:target ~ #nav ul {
background-color: orange;
border: 1px solid orange;
}
#pink:target ~ #nav ul {
background-color: pink;
border: 1px solid pink;
}
#green:target ~ #nav ul {
background-color: green;
border: 1px solid green;
}
#blue:target ~ #nav ul {
background-color: blue;
border: 1px solid blue;
}
#indigo:target ~ #nav ul {
background-color: indigo;
border: 1px solid indigo;
}
#violet:target ~ #nav ul {
background-color: violet;
border: 1px solid violet;
}
#grey:target ~ #nav ul {
background-color: grey;
border: 1px solid grey;
}
#red:target ~ #nav li:hover > a {
background-color: red;
}
#orange:target ~ #nav li:hover > a {
background-color: orange;
}
#pink:target ~ #nav li:hover > a {
background-color: pink;
}
#green:target ~ #nav li:hover > a {
background-color: green;
}
#blue:target ~ #nav li:hover > a {
background-color: blue;
}
#indigo:target ~ #nav li:hover > a {
background-color: indigo;
}
#violet:target ~ #nav li:hover > a {
background-color: violet;
}
#grey:target ~ #nav li:hover > a {
background-color: grey;
}
0 Comments
Yorum Gönder