28 Mart 2019 Perşembe

CSS ve jQuery ile Dikey Akordiyon (Vertical Accordion) Menü

Mart 28, 2019 Blogger İpuçları , Blogging 0 Comments
CSS ve jQuery ile Dikey Akordiyon (Vertical Accordion) Menü
Bu içerikte blogunuzun sidebarına vs. koyabileceğiniz alan olarak çok yer kaplamayan ama içerik olarak matruşka bebeklerine benzettiğim 5 adet akordiyon (accordion) menü örneği göstereceğim.

Bloğunuzda jQuery ve FontAwesome kütüphaneleri yoksa aşağıdaki kodları <head> kodunun altında uygun bir yere ekleyelim.

[<script src='//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>]

[<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>]

Kütüphanelerimiz tamamsa Blogger > Yerleşim > Gadget Ekle > HTML/JavaScript gadgetına aşağıdaki kodları ekleyelim.

Not: width değerleri ve renk kodları ile oynayarak kendi temanıza uygun hale getirebilirsiniz.
[<style type='text/css'>
#cssmenu1,#cssmenu1 ul,#cssmenu1 li,#cssmenu1 a{margin:0;padding:0;border:0;list-style:none;font-weight:normal;text-decoration:none;line-height:1;font-family:'Merriweather',sans-serif;font-size:14px;position:relative;}
#cssmenu1 a{line-height:1.3;}
#cssmenu1{width:250px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.6);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.6);box-shadow:0 0 5px rgba(0,0,0,0.6);}
#cssmenu1 > ul > li{margin:0 0 2px 0;}
#cssmenu1 > ul > li:last-child{margin:0;}
#cssmenu1 > ul > li > a{font-size:15px;display:block;color:#ffffff;text-shadow:0 1px 1px #000;background:#565656;background:-moz-linear-gradient(#565656 0%,#323232 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#565656),color-stop(100%,#323232));background:-webkit-linear-gradient(#565656 0%,#323232 100%);background:linear-gradient(#565656 0%,#323232 100%);border:1px solid #000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#cssmenu1 > ul > li > a > span{display:block;border:1px solid #666666;padding:6px 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-weight:bold;}
#cssmenu1 > ul > li > a:hover{text-decoration:none;}
#cssmenu1 > ul > li.active{border-bottom:none;}
#cssmenu1 > ul > li.active > a{background:#97be10;background:-moz-linear-gradient(#97be10 0%,#79980d 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#97be10),color-stop(100%,#79980d));background:-webkit-linear-gradient(#97be10 0%,#79980d 100%);background:linear-gradient(#97be10 0%,#79980d 100%);color:#fff;text-shadow:0 1px 1px #000;border:1px solid #79980d;}
#cssmenu1 > ul > li.active > a span{border:1px solid #97be10;}
#cssmenu1 > ul > li.has-sub > a span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNtq9cOwMKRbrpSXiG4ie4UxOGZpsfW6zMkG7WV0rRNhE3Ez2xOc8ZsgoDjywB748TZHj73_uML07o_Q-CGLlgCSYkRmUCeyrRolVxMfuXnZqXHrumJ14Ndx4Y-5rKfEzvYWaJ7SFIKpg/s1600/icon_plus.png) 98% center no-repeat;}
#cssmenu1 > ul > li.has-sub.active > a span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDXXt5_-Rlo2-WBoGDohAfroMrl8pBKmOPu3s82ZEtlYCUMz2_f7HghsyVSzOoe25gCushtMCOEehxKr5ajF0V7MUKm_sbVQSX3Oajsi_7AFX7-OTLUkuxWAAIEh7UFDsG6I1CfY7o94I/s1600/icon_minus.png) 98% center no-repeat;}
/* Sub menu */
#cssmenu1 ul ul{padding:5px 12px;display:none;}
#cssmenu1 ul ul li{padding:3px 0;}
#cssmenu1 ul ul a{display:block;color:#595959;font-size:13px;font-weight:bold;}
#cssmenu1 ul ul a:hover{color:#79980d;}
</style>

<div id='cssmenu1'>
<ul>
   <li class='active'><a href='#'><span>Ana Sayfa</span></a></li>
   <li class='has-sub'><a href='#'><span>Menü</span></a>
      <ul>
         <li><a href='#'><span>Alt Menü 1</span></a></li>
         <li><a href='#'><span>Alt Menü 2</span></a></li>
         <li class='last'><a href='#'><span>Alt Menü 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Hakkımda</span></a>
      <ul>
         <li><a href='#'><span>Alt Menü 1</span></a></li>
         <li class='last'><a href='#'><span>Alt Menü 2</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>İletişim</span></a></li>
</ul>
</div>

<script type='text/javascript'>
//<![CDATA[
!function(s){s(document).ready(function(){s("#cssmenu1 > ul > li > a").click(function(){s("#cssmenu1 li").removeClass("active"),s(this).closest("li").addClass("active");var i=s(this).next();return i.is("ul")&&i.is(":visible")&&(s(this).closest("li").removeClass("active"),i.slideUp("normal")),i.is("ul")&&!i.is(":visible")&&(s("#cssmenu1 ul ul:visible").slideUp("normal"),i.slideDown("normal")),0==s(this).closest("li").find("ul").children().length})})}(jQuery);
//]]>
</script>]

Sonuç

[<style type='text/css'>
#cssmenu2,#cssmenu2 ul,#cssmenu2 li,#cssmenu2 a{margin:0;padding:0;border:0;list-style:none;font-weight:normal;text-decoration:none;line-height:1;font-family:'Merriweather',sans-serif;font-size:14px;position:relative;}
#cssmenu2 a{line-height:1.3;}
#cssmenu2{width:250px;}
#cssmenu2 > ul > li > a{padding-right:40px;font-size:25px;font-weight:bold;display:block;background:#bd0e36;color:#ffffff;border-bottom:1px solid #5e071b;text-transform:uppercase;}
#cssmenu2 > ul > li > a > span{background:#ed1144;padding:10px;display:block;font-size:13px;font-weight:300;}
#cssmenu2 > ul > li > a:hover{text-decoration:none;}
#cssmenu2 > ul > li.active{border-bottom:none;}
#cssmenu2 > ul > li.active > a{color:#fff;}
#cssmenu2 > ul > li.active > a span{background:#bd0e36;}
#cssmenu2 span.cnt{position:absolute;top:8px;right:15px;padding:0;margin:0;background:none;}
/* Sub menu */
#cssmenu2 ul ul{display:none;}
#cssmenu2 ul ul li{border:1px solid #e0e0e0;border-top:0;}
#cssmenu2 ul ul a{padding:10px;display:block;color:#ed1144;font-size:13px;}
#cssmenu2 ul ul a:hover{color:#bd0e36;}
#cssmenu2 ul ul li.odd{background:#f4f4f4;}
#cssmenu2 ul ul li.even{background:#fff;}
</style>

<div id='cssmenu2'>
<ul>
   <li class='active'><a href='#'><span>Ana Sayfa</span></a></li>
   <li class='has-sub'><a href='#'><span>Menü</span></a>
      <ul>
         <li><a href='#'><span>Alt Menü 1</span></a></li>
         <li><a href='#'><span>Alt Menü 2</span></a></li>
         <li class='last'><a href='#'><span>Alt Menü 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Hakkımda</span></a>
      <ul>
         <li><a href='#'><span>Alt Menü 1</span></a></li>
         <li class='last'><a href='#'><span>Alt Menü 2</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>İletişim</span></a></li>
</ul>
</div>

<script type='text/javascript'>
//<![CDATA[
!function(s){s(document).ready(function(){s(document).ready(function(){s("#cssmenu2 > ul > li ul").each(function(l,e){var i='<span class="cnt">'+s(e).find("li").length+"</span>";s(e).closest("li").children("a").append(i)}),s("#cssmenu2 ul ul li:odd").addClass("odd"),s("#cssmenu2 ul ul li:even").addClass("even"),s("#cssmenu2 > ul > li > a").click(function(){s("#cssmenu2 li").removeClass("active"),s(this).closest("li").addClass("active");var l=s(this).next();return l.is("ul")&&l.is(":visible")&&(s(this).closest("li").removeClass("active"),l.slideUp("normal")),l.is("ul")&&!l.is(":visible")&&(s("#cssmenu2 ul ul:visible").slideUp("normal"),l.slideDown("normal")),0==s(this).closest("li").find("ul").children().length})})})}(jQuery);
//]]>
</script>]

Sonuç

[<style type='text/css'>
#cssmenu3,#cssmenu3 ul,#cssmenu3 ul li,#cssmenu3 ul li a{margin:0;padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#cssmenu3{width:200px;font-family:'Merriweather',sans-serif;color:#ffffff;}
#cssmenu3 ul ul{display:none;}
.align-right{float:right;}
#cssmenu3 > ul > li > a{padding:15px 20px;border-left:1px solid #1682ba;border-right:1px solid #1682ba;border-top:1px solid #1682ba;cursor:pointer;z-index:2;font-size:14px;font-weight:bold;text-decoration:none;color:#ffffff;text-shadow:0 1px 1px rgba(0,0,0,0.35);background:#36aae7;background:-webkit-linear-gradient(#36aae7,#1fa0e4);background:-moz-linear-gradient(#36aae7,#1fa0e4);background:-o-linear-gradient(#36aae7,#1fa0e4);background:-ms-linear-gradient(#36aae7,#1fa0e4);background:linear-gradient(#36aae7,#1fa0e4);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);}
#cssmenu3 > ul > li > a:hover,#cssmenu3 > ul > li.active > a,#cssmenu3 > ul > li.open > a{color:#eeeeee;background:#1fa0e4;background:-webkit-linear-gradient(#1fa0e4,#1992d1);background:-moz-linear-gradient(#1fa0e4,#1992d1);background:-o-linear-gradient(#1fa0e4,#1992d1);background:-ms-linear-gradient(#1fa0e4,#1992d1);background:linear-gradient(#1fa0e4,#1992d1);}
#cssmenu3 > ul > li.open > a{box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.15);border-bottom:1px solid #1682ba;}
#cssmenu3 > ul > li:last-child > a,#cssmenu3 > ul > li.last > a{border-bottom:1px solid #1682ba;}
.holder{width:0;height:0;position:absolute;top:0;right:0;}
.holder::after,.holder::before{display:block;position:absolute;content:"";width:6px;height:6px;right:20px;z-index:10;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg);}
.holder::after{top:17px;border-top:2px solid #ffffff;border-left:2px solid #ffffff;}
#cssmenu3 > ul > li > a:hover > span::after,#cssmenu3 > ul > li.active > a > span::after,#cssmenu3 > ul > li.open > a > span::after{border-color:#eeeeee;}
.holder::before{top:18px;border-top:2px solid;border-left:2px solid;border-top-color:inherit;border-left-color:inherit;}
#cssmenu3 ul ul li a{cursor:pointer;border-bottom:1px solid #32373e;border-left:1px solid #32373e;border-right:1px solid #32373e;padding:10px 20px;z-index:1;text-decoration:none;font-size:13px;color:#eeeeee;background:#49505a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);}
#cssmenu3 ul ul li:hover > a,#cssmenu3 ul ul li.open > a,#cssmenu3 ul ul li.active > a{background:#424852;color:#ffffff;}
#cssmenu3 ul ul li:first-child > a{box-shadow:none;}
#cssmenu3 ul ul ul li:first-child > a{box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);}
#cssmenu3 ul ul ul li a{padding-left:30px;}
#cssmenu3 > ul > li > ul > li:last-child > a,#cssmenu3 > ul > li > ul > li.last > a{border-bottom:0;}
#cssmenu3 > ul > li > ul > li.open:last-child > a,#cssmenu3 > ul > li > ul > li.last.open > a{border-bottom:1px solid #32373e;}
#cssmenu3 > ul > li > ul > li.open:last-child > ul > li:last-child > a{border-bottom:0;}
#cssmenu3 ul ul li.has-sub > a::after{display:block;position:absolute;content:"";width:5px;height:5px;right:20px;z-index:10;top:11.5px;border-top:2px solid #eeeeee;border-left:2px solid #eeeeee;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg);}
#cssmenu3 ul ul li.active > a::after,#cssmenu3 ul ul li.open > a::after,#cssmenu3 ul ul li > a:hover::after{border-color:#ffffff;}
</style>

<div id='cssmenu3'>
<ul>
   <li><a href='#'><span>Ana Sayfa</span></a></li>
   <li class='active has-sub'><a href='#'><span>Menü</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Menü 1</span></a>
            <ul>
               <li><a href='#'><span>Alt Menü 1</span></a></li>
               <li class='last'><a href='#'><span>Alt Menü 2</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Menü 2</span></a>
            <ul>
               <li><a href='#'><span>Alt Menü 1</span></a></li>
               <li class='last'><a href='#'><span>Alt Menü 2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Hakkımda</span></a></li>
   <li class='last'><a href='#'><span>İletişim</span></a></li>
</ul>
</div>

<script type='text/javascript'>
//<![CDATA[
!function(s){s(document).ready(function(){var e;s("#cssmenu3 li.has-sub>a").on("click",function(){s(this).removeAttr("href");var e=s(this).parent("li");e.hasClass("open")?(e.removeClass("open"),e.find("li").removeClass("open"),e.find("ul").slideUp()):(e.addClass("open"),e.children("ul").slideDown(),e.siblings("li").children("ul").slideUp(),e.siblings("li").removeClass("open"),e.siblings("li").find("li").removeClass("open"),e.siblings("li").find("ul").slideUp())}),s("#cssmenu3>ul>li.has-sub>a").append('<span class="holder"></span>'),function(s,e,i){s/=255,e/=255,i/=255;var l=Math.max(s,e,i),n=Math.min(s,e,i),a=(l+n)/2;if(l==n);else{l}return a}((e=(e=s("#cssmenu3").css("color")).slice(4)).slice(0,e.indexOf(",")),(e=e.slice(e.indexOf(" ")+1)).slice(0,e.indexOf(",")),(e=e.slice(e.indexOf(" ")+1)).slice(0,e.indexOf(")")))>.7?(s("#cssmenu3>ul>li>a").css("text-shadow","0 1px 1px rgba(0, 0, 0, .35)"),s("#cssmenu3>ul>li>a>span").css("border-color","rgba(0, 0, 0, .35)")):(s("#cssmenu3>ul>li>a").css("text-shadow","0 1px 0 rgba(255, 255, 255, .35)"),s("#cssmenu3>ul>li>a>span").css("border-color","rgba(255, 255, 255, .35)"))})}(jQuery);
//]]>
</script>]

Sonuç

[<style type='text/css'>
#cssmenu4,#cssmenu4 ul,#cssmenu4 li,#cssmenu4 a{margin:0;padding:0;border:0;list-style:none;font-weight:normal;text-decoration:none;line-height:1;font-family:'Merriweather',sans-serif;font-size:14px;position:relative;}
#cssmenu4{width:250px;border-bottom:4px solid #656659;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#cssmenu4 a{line-height:1.3;}
#cssmenu4 > ul > li:first-child{background:#66665e;background:-moz-linear-gradient(#66665e 0%,#45463d 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#66665e),color-stop(100%,#45463d));background:-webkit-linear-gradient(#66665e 0%,#45463d 100%);background:linear-gradient(#66665e 0%,#45463d 100%);border:1px solid #45463d;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}
#cssmenu4 > ul > li:first-child > a{padding:15px 10px;background:url(images/pattern.png) top left repeat;border:none;border-top:1px solid #818176;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;font-family:'Merriweather',sans-serif;text-align:center;font-size:18px;font-weight:300;text-shadow:0 -1px 1px #000000;}
#cssmenu4 > ul > li:first-child > a > span{padding:0;}
#cssmenu4 > ul > li:first-child:hover{background:#66665e;background:-moz-linear-gradient(#66665e 0%,#45463d 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#66665e),color-stop(100%,#45463d));background:-webkit-linear-gradient(#66665e 0%,#45463d 100%);background:linear-gradient(#66665e 0%,#45463d 100%);}
#cssmenu4 > ul > li{background:#e94f31;background:-moz-linear-gradient(#e94f31 0%,#d13516 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e94f31),color-stop(100%,#d13516));background:-webkit-linear-gradient(#e94f31 0%,#d13516 100%);background:linear-gradient(#e94f31 0%,#d13516 100%);}
#cssmenu4 > ul > li:hover{background:#e84323;background:-moz-linear-gradient(#e84323 0%,#c33115 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e84323),color-stop(100%,#c33115));background:-webkit-linear-gradient(#e84323 0%,#c33115 100%);background:linear-gradient(#e84323 0%,#c33115 100%);}
#cssmenu4 > ul > li > a{font-size:14px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvS1bkfgCk5zA1OHSC7i6dssCeFPfooZ9TumBbCjOLakDd-yFMPX87M4X3mM7tIm6_wQLNJOucJ1ms_zp_r29Cf0lwZo9aw0B9i-55glOJyG1KLfYZ6Ayg5Yt1NSFlviux-ebLU0TQ3T4/s1600/pattern.png) top left repeat;color:#ffffff;border:1px solid #ba2f14;border-top:none;text-shadow:0 -1px 1px #751d0c;}
#cssmenu4 > ul > li > a > span{display:block;padding:12px 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#cssmenu4 > ul > li > a:hover{text-decoration:none;}
#cssmenu4 > ul > li.active{border-bottom:none;}
#cssmenu4 > ul > li.has-sub > a span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNtq9cOwMKRbrpSXiG4ie4UxOGZpsfW6zMkG7WV0rRNhE3Ez2xOc8ZsgoDjywB748TZHj73_uML07o_Q-CGLlgCSYkRmUCeyrRolVxMfuXnZqXHrumJ14Ndx4Y-5rKfEzvYWaJ7SFIKpg/s1600/icon_plus.png) 96% center no-repeat;}
#cssmenu4 > ul > li.has-sub.active > a span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDXXt5_-Rlo2-WBoGDohAfroMrl8pBKmOPu3s82ZEtlYCUMz2_f7HghsyVSzOoe25gCushtMCOEehxKr5ajF0V7MUKm_sbVQSX3Oajsi_7AFX7-OTLUkuxWAAIEh7UFDsG6I1CfY7o94I/s1600/icon_minus.png) 96% center no-repeat;}
/* Sub menu */
#cssmenu4 ul ul{display:none;background:#fff;border-right:1px solid #a2a194;border-left:1px solid #a2a194;}
#cssmenu4 ul ul li{padding:0;border-bottom:1px solid #d4d4d4;border-top:none;background:#f7f7f7;background:-moz-linear-gradient(#f7f7f7 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f7f7f7),color-stop(100%,#ececec));background:-webkit-linear-gradient(#f7f7f7 0%,#ececec 100%);background:linear-gradient(#f7f7f7 0%,#ececec 100%);}
#cssmenu4 ul ul li:last-child{border-bottom:none;}
#cssmenu4 ul ul a{padding:10px 10px 10px 25px;display:block;color:#676767;font-size:12px;font-weight:normal;}
#cssmenu4 ul ul a:before{content:"»";position:absolute;left:10px;color:#e94f31;}
#cssmenu4 ul ul a:hover{color:#e94f31;}
</style>
<div id='cssmenu4'>
<ul>
   <li class='active'><a href='#'><span>Ana Sayfa</span></a></li>
   <li class='has-sub'><a href='#'><span>Menü</span></a>
      <ul>
         <li><a href='#'><span>Alt Menü 1</span></a></li>
         <li><a href='#'><span>Alt Menü 2</span></a></li>
         <li class='last'><a href='#'><span>Alt Menü 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Hakkımda</span></a>
      <ul>
         <li><a href='#'><span>Alt Menü 1</span></a></li>
         <li class='last'><a href='#'><span>Alt Menü 2</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>İletişim</span></a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
!function(s){s(document).ready(function(){s("#cssmenu4 > ul > li > a").click(function(){s("#cssmenu4 li").removeClass("active"),s(this).closest("li").addClass("active");var i=s(this).next();return i.is("ul")&&i.is(":visible")&&(s(this).closest("li").removeClass("active"),i.slideUp("normal")),i.is("ul")&&!i.is(":visible")&&(s("#cssmenu4 ul ul:visible").slideUp("normal"),i.slideDown("normal")),0==s(this).closest("li").find("ul").children().length})})}(jQuery);
//]]>
</script>]

Sonuç

[<style type='text/css'>
#cssmenu5{position:relative;margin:0;font-family:'Merriweather';line-height:1;width:250px;margin:0 auto;}
.align-right{float:right;}
#cssmenu5 ul{margin:0;padding:0;list-style:none;display:block;}
#cssmenu5 ul li{position:relative;margin:0;padding:0;}
#cssmenu5 ul li a{text-decoration:none;cursor:pointer;}
#cssmenu5 > ul > li > a{color:#dddddd;display:block;padding:20px;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;background:#222222;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);letter-spacing:1px;font-size:16px;font-weight:300;-webkit-transition:all 0.25s ease-in;-moz-transition:all 0.25s ease-in;-ms-transition:all 0.25s ease-in;-o-transition:all 0.25s ease-in;transition:all 0.25s ease-in;position:relative;}
#cssmenu5 > ul > li:first-child > a{border-top-left-radius:3px;border-top-right-radius:3px;}
#cssmenu5 > ul > li:last-child > a{border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom:1px solid #000000;}
#cssmenu5 > ul > li:hover > a,#cssmenu5 > ul > li.open > a,#cssmenu5 > ul > li.active > a{background:#151515;color:#ffffff;}
#cssmenu5 ul > li.has-sub > a::after{content:"";position:absolute;display:block;width:0;height:0;border-top:13px solid #000000;border-botom:13px solid transparent;border-left:125px solid transparent;border-right:125px solid transparent;left:0;bottom:-13px;bottom:0;z-index:1;opacity:0;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
#cssmenu5 ul > li.has-sub > a::before{content:"";position:absolute;display:block;width:0;height:0;border-top:13px solid #151515;border-botom:13px solid transparent;border-left:125px solid transparent;border-right:125px solid transparent;left:0;bottom:-12px;bottom:-1px;z-index:3;opacity:0;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
#cssmenu5 ul > li.has-sub::after{content:"";display:block;position:absolute;width:0;height:0;border:7px solid transparent;border-top-color:#dddddd;z-index:2;right:20px;top:24.5px;pointer-events:none;}
#cssmenu5 ul > li:hover::after,#cssmenu5 ul > li.active::after,#cssmenu5 ul > li.open::after{border-top-color:#ffffff;}
#cssmenu5 ul > li.has-sub.open > a::after{opacity:1;bottom:-13px;}
#cssmenu5 ul > li.has-sub.open > a::before{opacity:1;bottom:-12px;}
#cssmenu5 ul ul{display:none;}
#cssmenu5 ul ul li{border-left:1px solid #ccc;border-right:1px solid #ccc;}
#cssmenu5 ul ul li a{background:#f1f1f1;display:block;position:relative;font-size:15px;padding:14px 20px;border-bottom:1px solid #dddddd;color:#777777;font-weight:300;-webkit-transition:all 0.25s ease-in;-moz-transition:all 0.25s ease-in;-ms-transition:all 0.25s ease-in;-o-transition:all 0.25s ease-in;transition:all 0.25s ease-in;}
#cssmenu5 ul ul li:first-child > a{padding-top:18px;}
#cssmenu5 ul ul ul li{border:0;}
#cssmenu5 ul ul li:hover > a,#cssmenu5 ul ul li.open > a,#cssmenu5 ul ul li.active > a{background:#e4e4e4;color:#666666;}
#cssmenu5 ul ul > li.has-sub > a::after{border-top:13px solid #dddddd;}
#cssmenu5 ul ul > li.has-sub > a::before{border-top:13px solid #e4e4e4;}
#cssmenu5 ul ul ul li a{padding-left:30px;}
#cssmenu5 ul ul > li.has-sub::after{top:18.5px;border-width:6px;border-top-color:#777777;}
#cssmenu5 ul ul > li:hover::after,#cssmenu5 ul ul > li.active::after,#cssmenu5 ul ul > li.open::after{border-top-color:#666666;}
</style>

<div id='cssmenu5'>
<ul>
   <li><a href='#'><i class="fa fa-home" aria-hidden="true"></i><span> Ana Sayfa</span></a></li>
   <li class='active has-sub'><a href='#'><i class="fa fa-bars" aria-hidden="true"></i><span> Menü</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Menü 1</span></a>
            <ul>
               <li><a href='#'><span>Alt Menü 1</span></a></li>
               <li class='last'><a href='#'><span>Alt Menü 2</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Menü 2</span></a>
            <ul>
               <li><a href='#'><span>Alt Menü 1</span></a></li>
               <li class='last'><a href='#'><span>Alt Menü 2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><i class="fa fa-cog" aria-hidden="true"></i><span> Ayarlar</span></a></li>
   <li class='last'><a href='#'><span><i class="fa fa-phone" aria-hidden="true"></i> İletişim</span></a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
!function(i){i(document).ready(function(){i("#cssmenu5 li.has-sub>a").on("click",function(){i(this).removeAttr("href");var s=i(this).parent("li");s.hasClass("open")?(s.removeClass("open"),s.find("li").removeClass("open"),s.find("ul").slideUp()):(s.addClass("open"),s.children("ul").slideDown(),s.siblings("li").children("ul").slideUp(),s.siblings("li").removeClass("open"),s.siblings("li").find("li").removeClass("open"),s.siblings("li").find("ul").slideUp())})})}(jQuery);
//]]>
</script>]

Sonuç
By on
Tür: , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)