CSS

CSS ile açılır menü (efektli) nasıl yapılır ?

Bu örnekte CSS ile açılır menünün nasıl yapıldığına göz atacağız. Açılır menüdeki mantık, li içindeki ul nesnesine absolute değerini vermekten ibarettir. Bir örnek ile açıklayacak olursak;

HTML yapısı şu şekilde olsun;

<div class = "content">
    
    <ul class="navbar">
      <li><a href="">Anasayfa</a></li>
      <li><a href="">Hakkımızda</a></li>
      <li>
        <a href="">Referanslarımız</a>
        <ul>
          <li><a href="">Test bir hizmet adi - 1</a></li>
          <li><a href="">Test bir hizmet adi - 2</a></li>
          <li><a href="">Test bir hizmet adi - 3</a></li>
          <li><a href="">Test bir hizmet adi - 4</a></li>
          <li><a href="">Test bir hizmet adi - 5</a></li>
          <li><a href="">Test bir hizmet adi - 6</a></li>
        </ul>
      </li>
      <li><a href="">İletişim</a></li>
    </ul>
    
    <div class="website_desc">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi praesentium commodi nesciunt distinctio aliquid, qui expedita a eius, iure vero odio. Magni, alias laboriosam quas culpa perspiciatis. Nostrum, quis, itaque!</div>
    
      <br class = "clear" />

      <div>Natus modi ut cupiditate. Quisquam repellendus sequi, quia eaque similique aut voluptate atque, molestiae molestias, accusantium facere. Nihil laudantium fugit eaque vel reprehenderit modi quos. Necessitatibus, labore, quidem. Deleniti, ad.</div>
      
      <br class = "clear" />

      <div>Dolorem at ipsum, id, praesentium nostrum ratione suscipit sapiente explicabo hic sit ab laboriosam, itaque minima, vitae inventore modi voluptas? Obcaecati fuga neque nemo eaque eum ullam explicabo assumenda. Suscipit.</div>
      
      <br class = "clear" />

      <div>Excepturi atque, tempora consequatur vel sit molestias reprehenderit! Laudantium dignissimos, iure earum rem, sunt facilis consequuntur. Ex quibusdam doloribus nisi vitae architecto, quo reiciendis et ut ducimus, alias nemo qui.</div>
      
      <br class = "clear" />

      <div>Nesciunt dicta debitis aut blanditiis adipisci ut, molestiae, animi quod maxime harum voluptatem! Magni sequi beatae sapiente reprehenderit consectetur, fuga perferendis quia nihil tempora. Odio nulla, ratione consequatur ipsa? Natus.</div>
    </div>
    
  </div>

CSS yapınız  ise şu şekilde olsun;

* {margin:0;padding:0;list-style:none;font-family: 'Arial',sans-serif}
  a {text-decoration: none;}


  .content {
    padding:25px;
    width:1170px;
    margin:50px auto;
    font-size:15px;
    font-family: tahoma;
    color:#565656;
    line-height:22px;
  }

  .navbar {
    width:100%;
    border-top:1px solid #ededed;
    border-bottom:1px solid #ededed;
    text-align:center;
  }

  .navbar:after {
    content:'';
    display:block;
    clear:both;
  }

  .navbar > li {
    display: inline-block;
    position: relative;
  }

  .navbar > li > a {
    display:block;
    padding:0 25px;
    line-height:50px;
    color:#565656;
  }
  .navbar > li > ul {
    position: absolute;
    background:#ffffff;
    min-width:300px;
    left:0;
    top:130%;
    border:1px solid #ededed;
    transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
    z-index:2;
    opacity: 0;
    visibility: hidden;
  }
  .navbar > li > ul > li > a {
    display:block;
    padding:10px;
    border-bottom:1px solid #ededed;
    font-size:14px;
    text-align: left;
    color:#565656;
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
  }
  
  .navbar > li > ul > li > a:hover {
    background:skyblue;
    color:#ffffff;
  }

  .navbar > li:hover > ul {
    top:100%;
    opacity: 1;
    visibility: visible;
  }
  .website_desc {
    padding-top:40px;
  }

Örneğin canlı hali için buraya tıklayınız.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir