css Açılır Menü Yapımı Örneği | HTML + CSS

[programYaz]

Bu yazımızda html ve css kullanarak 2 farklı açılır menü örneklerini yazacağız. Sırayla menülerimizi ve kodlarını görelim.

 

HTML ve CSS ile Aşağı Açılır Menü:

 

HTML KODLARI : 

    <ul>
        <li>Anasayfa</li>
        <li>Hakkımızda</li>
        <li>
          Dersler
          <ul>
            <li>Web Tasarım</li>
            <li>Yapay Zeka</li>
            <li>Mobil Programlama</li>
          </ul>
        </li>
        <li>İletişim</li>
    </ul>

 

 

CSS KODLARI: 

body {
  font-family: Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #F09819;
  background: -webkit-linear-gradient(to left, #F09819 , #EDDE5D);
  background: linear-gradient(to left, #F09819 , #EDDE5D);
}
ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

 

2.ÖRNEK:

 

 

 

HTML KODLARI: 

   <nav>
      <label for="touch"><span>Anasayfa</span></label>               
      <input type="checkbox" id="touch"> 
    
      <ul class="slide">
        <li><a href="#">Hakkımızda</a></li> 
        <li><a href="#">Portfolyo</a></li>
        <li><a href="#">İletişim</a></li>
      </ul>
    </nav> 

 

CSS KODLARI: 

body {background-color : #ededed; font-family : "Open Sans", sans-serif;}

h1 {padding: 40px; text-align: center; font-size: 1.5em;}

li a {text-decoration : none; color : #2d2f31;}


nav {
  width : 300px; 
  background: #d9d9d9;
  margin : 40px auto; 
}

span {
  padding : 30px;
  background : #2d2f31; 
  color : white;
  font-size : 1.2em;
  font-variant : small-caps;
  cursor : pointer;
  display: block;
}

span::after {
  float: right;
  right: 10%;
  content: "+";
}

.slide {
  padding: 0;
  clear:both;
  width:100%;
  height:0px;
  overflow: hidden;
  text-align: center;
  transition: height .4s ease;
  list-style: none;
}

.slide li {text-decoration : none;  padding : 30px;}

#touch {position: absolute; opacity: 0; height: 0px;}    

#touch:checked + .slide {height: auto;}