CSS

CSS ile mega menü yapımı

CSS ile mega menü yapımı biz arayüz yazılımcılarının başını en çok ağrıtan aynı zamanda yapımıda bir o kadar basit olan bir kavramdır. Örneğimizde hiç bir Javascript (jQuery) kodu kullanmadan nasıl mega menü yapabileceğimizi öğreneceğiz.

CSS ile mega menü yapımında CSS’in absolute vs relative özelliklerinin kullanımı bilmek bir hayli önemlidir. Bunun nedeni ise bir nesneyi diğer nesneden bağımsız tutabilmek için CSS’in absolute özelliği kullanılır. Bu nesnenin sınırlarını belirlemek için ise relative kullanılır. Bunu daha gösterişli hale getirebilmek için ise transition özelliği kullanılmaktadır. Örnek;

HTML kodları;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS ile mega menü yapımı</title>
  <!-- Javascript Files -->
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <!-- CSS Files -->
  <link href='https://fonts.googleapis.com/css?family=Hind+Vadodara:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
  <!-- Website Wrapper Start -->
  <div class = "website_wrapper">
    <div class = "column">
      <h2>Effect - 1</h2>
      <section class="menu_wrapper color_1">
        <div class="container">
          <div class="menu_bar white">
            <nav class = "my_menu">
              <li><a href="">Anasayfa</a></li>
              <li><a href="">Hakkımızda</a></li>
              <li>
                <a href="">Hizmetlerimiz <em class = "fa fa-angle-down"></em></a>
                <div class="dropdown_menu style_1">
                  <div class="container">
                    <nav>
                      <li>
                        <div class="dropdown_menu_title">Dropdown Title - 1</div>
                        <a href="">Dropdown Link - 1</a>
                        <a href="">Dropdown Link - 2</a>
                        <a href="">Dropdown Link - 3</a>
                        <a href="">Dropdown Link - 4</a>
                        <a href="">Dropdown Link - 5</a>
                      </li>
                      <li>
                        <div class="dropdown_menu_title">Dropdown Title - 2</div>
                        <a href="">Dropdown Link - 1</a>
                        <a href="">Dropdown Link - 2</a>
                        <a href="">Dropdown Link - 3</a>
                        <a href="">Dropdown Link - 4</a>
                        <a href="">Dropdown Link - 5</a>
                      </li>
                      <li>
                        <div class="dropdown_menu_title">Dropdown Title - 3</div>
                        <a href="">Dropdown Link - 1</a>
                        <a href="">Dropdown Link - 2</a>
                        <a href="">Dropdown Link - 3</a>
                        <a href="">Dropdown Link - 4</a>
                        <a href="">Dropdown Link - 5</a>
                      </li>
                      <li>
                        <div class="dropdown_menu_title">Dropdown Title - 4</div>
                        <a href="">Dropdown Link - 1</a>
                        <a href="">Dropdown Link - 2</a>
                        <a href="">Dropdown Link - 3</a>
                        <a href="">Dropdown Link - 4</a>
                        <a href="">Dropdown Link - 5</a>
                      </li>
                    </nav>
                  </div>
                </div>
              </li>
              <li><a href="">Ürünlerimiz</a></li>
              <li><a href="">İletişim</a></li>
            </nav>
          </div>
        </div>
      </section>
    </div>
    <div class = "column">
      <h2>Effect - 2</h2>
      <section class="menu_wrapper color_2">
        <div class="container">
          <div class="menu_bar">
            <nav class = "my_menu">
              <li><a href="">Anasayfa</a></li>
              <li><a href="">Hakkımızda</a></li>
              <li>
                <a href="">Hizmetlerimiz <em class = "fa fa-angle-down"></em></a>
                <div class="dropdown_menu style_2">
                  <div class="container">
                    <nav>
                      <li>
                        <div class="dropdown_menu_title">Dropdown Title - 1</div>
                        <a href="">Dropdown Link - 1</a>
                        <a href="">Dropdown Link - 2</a>
                        <a href="">Dropdown Link - 3</a>
                        <a href="">Dropdown Link - 4</a>
                        <a href="">Dropdown Link - 5</a>
                      </li>
                      <li>
                        <div class="dropdown_menu_title">Dropdown Title - 2</div>
                        <a href="">Dropdown Link - 1</a>
                        <a href="">Dropdown Link - 2</a>
                        <a href="">Dropdown Link - 3</a>
                        <a href="">Dropdown Link - 4</a>
                        <a href="">Dropdown Link - 5</a>
                      </li>
                      <li>
                        <div class="dropdown_menu_title">Dropdown Title - 3</div>
                        <a href="">Dropdown Link - 1</a>
                        <a href="">Dropdown Link - 2</a>
                        <a href="">Dropdown Link - 3</a>
                        <a href="">Dropdown Link - 4</a>
                        <a href="">Dropdown Link - 5</a>
                      </li>
                      <li>
                        <div class="dropdown_menu_title">Dropdown Title - 4</div>
                        <a href="">Dropdown Link - 1</a>
                        <a href="">Dropdown Link - 2</a>
                        <a href="">Dropdown Link - 3</a>
                        <a href="">Dropdown Link - 4</a>
                        <a href="">Dropdown Link - 5</a>
                      </li>
                    </nav>
                  </div>
                </div>
              </li>
              <li><a href="">Ürünlerimiz</a></li>
              <li><a href="">İletişim</a></li>
            </nav>
          </div>
        </div>
      </section>
    </div>
    <a target = "_blank" href="http://www.sinanoztop.com/category/css/" class="link">Diğer CSS örnekleri için tıklayınız...</a>
  </div>
  <!-- Website Wrapper End -->
</body>
</html>

CSS kodumuz;

* {margin:0;padding:0;list-style:none;box-sizing:border-box;font-family: 'Hind Vadodara', sans-serif;}
  a {text-decoration: none;}
  html {
    height:100%;
  }
  body {
    height:100%;
  }
  h2 {
    text-align: center;
    padding:25px 0;
  }
  .link {
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    display: block;
    padding:20px 0;
    margin-top: 40px;
    text-align: center;
    background:#000000;
    color:#ffffff;

  }
  section.menu_wrapper {
    position: relative;
  }
  section.menu_wrapper.color_1,section.menu_wrapper.color_1 .dropdown_menu {
    background:#d43d3d;
  }
  section.menu_wrapper.color_2 {
    perspective: 200px;
      -webkit-perspective: 200px;
      -moz-perspective: 200px;
      -ms-perspective: 200px;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
  }
  section.menu_wrapper.color_2,section.menu_wrapper.color_2 .dropdown_menu {
    background:#4e3089;
  }
  .container {
    max-width:1170px;
    margin:0px auto;
  }
  .menu_bar:after {
    content:'';
    display:block;
    clear:both;
  }
  .my_menu {
    text-align: center;
  }
  .my_menu > li {
    display:inline-block;
  }
  .my_menu > li > a {
    display:block;
    padding:20px;
    font-size:17px;
    color:#ffffff;
  }
  .my_menu > li > a em {
    margin-left:5px;
  }
  
  .my_menu > li:first-child a {
    padding-left:0;
  }

  .my_menu > li > .dropdown_menu {
    position: absolute;
    width:100%;
    top:100%;
    left:0;
    padding:40px 0;
    text-align: left;
    transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
    z-index:2;
  }
  .my_menu > li > .dropdown_menu nav:after {
    content:'';
    display:block;
    clear: both;
  }
  .my_menu > li > .dropdown_menu nav > li {
    float:left;
    width:25%;
  }
  .my_menu > li > .dropdown_menu nav > li > .dropdown_menu_title {
    color:#ffffff;
    font-size:15px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom:1px solid #ededed;
  }
  .my_menu > li > .dropdown_menu nav > li > a {
    display:block;
    padding-bottom:14px;
    color:#ffffff;
    font-size:13px;
  }
  .my_menu > li > .dropdown_menu.style_1 {
    opacity:0;
    visibility: hidden;
    filter:alpha(opacity=0);
    top:140%;
  }
  .my_menu > li:hover .dropdown_menu.style_1 {
    top:100%;
    opacity: 1;
    visibility: visible;
    filter:alpha(opacity=1);
  }
  .my_menu > li > .dropdown_menu.style_2 {
    transition:all 0.4s linear;
    -webkit-transition:all 0.4s linear;
      transform: rotateX(-90deg);
      -webkit-transform: rotateX(-90deg);
      -moz-transform: rotateX(-90deg);
      -ms-transform: rotateX(-90deg);
      -o-transform: rotateX(-90deg);
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      -webkit-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -o-transform-origin: 0% 0%;
      transform-origin: 0% 0%
  }
  .my_menu > li:hover > .dropdown_menu.style_2 {
    transform: rotateX(0deg);
      -webkit-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
      -o-transform: rotateX(0deg);
  }

Örneğin çalışır 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