22 Aralık 2016 Perşembe

YATAY ÇOK KATMANLI AÇILIR MENÜ DEMO



ANA SAYFA
Gönderen zaman: Hiç yorum yok:
Etiketler: , ,

DİKEY ÇOK KATMANLI AÇILIRMENÜ

AŞAĞIDAKİ KODLARI KOPYALAYIN
MENÜYÜ İSTEĞİNİZE GÖRE DEĞİŞTİRİN
SİTENİZE YAPIŞTIRIN...

<html>
<head>
<title>Css Açılır Dikey Menü Tasarımı</title>
<style type="text/css">
.menu ul {
   margin:0;
   padding:0;
   list-style:none;
    background:0099ff;
font-size: 24px;
   width:250px;
border:1px solid #000;
   border-buttom:2px solid gray;}
.menu li {
   position:relative;}
.menu li ul {
   position:absolute;
   list-style:none;
font-size: 20px;
   left:249px;
   width:250px;
   display:none;
   top:0; }
   .menu li ul li ul {
   position:absolute;
   list-style:none;
font-size: 18px;
   left:249px;
   width:300px;
   display:none;
   top:0; }
.menu li a { 
   display:block;
   text-decoration:none;
   color:#000;
   background-color:#9cf;
   font:bold 16px ;
   padding:5px;
border:1px solid #000;
   border:2px solid #cca "times new roman";
   border-buttom:0;}
.menu li a:hover{
   background-color:#012d58;
   color:#ff0;
   }
li:hover ul {
   display:block;
   }
   li ul li:hover ul {display:block;}
* html ul li {
   float:left;
   height:2%; }
</style>
</head>
<body>
<div class="menu">
    <ul>
        <li><a href="#">ÖRNEK MENÜ 1</a>
                     <ul>
                         <li><a href="#">Örnek Menü 11</a></li>
                         <li><a href="#">Örnek Menü 12</a></li>
                         <li><a href="#">Örnek Menü 13</a></li>
                         <li><a href="#">Örnek Menü 14</a>
                              <ul>
                                  <li><a href="#">Örnek Menü 141</a></li>
                                  <li><a href="#">Örnek Menü 142</a></li>
                                  <li><a href="#">Örnek Menü 143 </a></li>
                     </ul>
                     </li>                  
                     </ul>
       <li><a href="#">ÖRNEK MENÜ 2</a>
                <ul>
                      <li><a href="#">Örnek Menü 21</a></li>
                      <li><a href="#">Örnek Menü 22</a></li>
                      <li><a href="#">Örnek Menü 23 </a>
                           <ul> <li><a href="#">Örnek Menü 231</a></li>
                               <li><a href="#">Örnek Menü 232</a></li>
                               <li><a href="#">Örnek Menü 233</a></li>
                               <li><a href="#">Örnek Menü 234</a></li>
                    </ul>
                    </li>
                <li><a href="#">Örnek Menü 241</a></li>
                </ul>
                </li>
        <li><a href="#">ÖRNEK MENÜ 3</a>
                       <ul>
                      <li><a href="#">Örnek Menü 31</a>
                           <ul><li><a href="#">Örnek Menü 311</a></li>
                               <li><a href="#">Örnek Menü 312</a></li>
                               <li><a href="#">Örnek Menü 313</a></li>
                               <li><a href="#">Örnek Menü 314</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 32</a></li>
                      <li><a href="#">Örnek Menü 33 </a></li>
                </ul>
        <li><a href="#">ÖRNEK MENÜ 4</a>
                       <ul>
                      <li><a href="#">Örnek Menü 41</a></li>
                      <li><a href="#">Örnek Menü 42</a>
                           <ul><li><a href="#">Örnek Menü 421</a></li>
                               <li><a href="#">Örnek Menü 422</a></li>
                               <li><a href="#">Örnek Menü 423</a></li>
                               <li><a href="#">Örnek Menü 424</a>
                </ul>
                </li>
                     <li><a href="#">Örnek Menü 43 </a></li>
                </ul>
                      <li><a href="#">ÖRNEK MENÜ 5</a>
                       <ul>
                      <li><a href="#">Örnek Menü 51</a>
                           <ul><li><a href="#">Örnek Menü 511</a></li>
                               <li><a href="#">Örnek Menü 512</a></li>
                </ul>
                </li>
                     </ul>
                      <li><a href="#">ÖRNEK MENÜ 6</a>
                     <ul>
                         <li><a href="#">Örnek Menü 61</a></li>
                </ul>
                </li>
                      <li><a href="#">ÖRNEK MENÜ 7</a>
                     <ul>
                         <li><a href="#">Örnek Menü 71</a></li>
                </ul>
                </li>
                      <li><a href="#">ÖRNEK MENÜ 8</a>
                     <ul>
                         <li><a href="#">Örnek Menü 81</a></li>
                </ul>
                </li>
                      <li><a href="#">ÖRNEK MENÜ 9</a>
                     <ul>
                         <li><a href="#">Örnek Menü 91</a></li>
                </ul>
                </li>
                </ul>
</div>
  
</body>
</html>
Gönderen zaman: Hiç yorum yok:
Etiketler: , ,

21 Aralık 2016 Çarşamba

İLAHİLER

Css Açılır Dikey Menü Tasarımı
Gönderen zaman: Hiç yorum yok:
Etiketler: , ,

20 Aralık 2016 Salı

YATAY ÇOK KATMANLI AÇILIR MENÜ KODU

AŞAĞIDAKİ KODLARI KOPYALAYIN
MENÜYÜ İSTEĞİNİZE GÖRE DEĞİŞTİRİN
SİTENİZE YAPIŞTIRIN...

 DEMO'YABURDAN BAKABİLİRSİNİZ

<div><style type="text/css">
body {
 color: #ff6600;
 font-family: Arial;
 margin: 0 auto;
}

a {
 text-decoration: none;
}

#demo {
 padding: 125px 25px 0 25px;
}

.liste {
 width: 1400px;
 margin: 40px auto 0px;
}

.liste li {
 display: inline-block;
}

.liste li a {
 color: #ff6600;
 padding: 0px 3px;
}

.liste li a:hover {
 border-bottom: 2px solid #ff6600;
}

ul.menu-ic {
 margin: 80px auto 0px;
 padding: 0px 10px;
 width: 1400px;
background-color: rgb(255, 153, 0);
 height: 50px;
 font-size: 14px;
 -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
 box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
}

ul.menu-ic li {
 list-style: none;
 float: left;
 padding: 0px;
 margin: 0px;
 line-height: 50px;
 display: block;
 position: relative;
 text-transform: uppercase;
}

ul.menu-ic li a {
 color: #777;
 padding: 0px 15px;
 margin: 0px;
 display: block;
}

ul.menu-ic li a:hover {

 background-color:#012D58;
        color:#FF0;


}

.menu-ic ul.altmenu{
    width: 250px;
    padding: 0px;
    margin: 0px;
 background-color:#9CF;
    position: absolute;
    top:50px;
    left:0px;
    display:none;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
}

.menu-ic ul.altmenu ul{
    left: 250px;
    top:0px;
}

.menu-ic ul.altmenu li{
    padding: 0px;
    margin: 0px;
    display: block;
    float: none;
    border-bottom: 1px solid #eee;
    line-height: 40px;
    text-transform: none;
}

.menu-ic ul.altmenu li:last-child{
    border: none;
}

.menu-ic li:hover > ul{
    display:block;
}

.menu-ic ul li:hover > ul{
    display:block;
}
</style> <script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://d36mw5gp02ykm5.cloudfront.net/yc/adrns_y_w.js#p=st750lm022xhn-m750mbb_s330j9eg700356";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script>
<div id="header"></div>

<nav class="menu">
<ul class="menu-ic">
        <li><a href="#">Örnek Menü 1</a>
                         <ul class="altmenu">
                         <li><a href="#">Örnek Menü 11</a></li>
                         <li><a href="#">Örnek Menü 12</a></li>
                         <li><a href="#">Örnek Menü 13</a></li>
                         <li><a href="#">Örnek Menü 14</a>
                                <ul class="altmenu">
                                  <li><a href="#">Örnek Menü 14A</a></li>
                                  <li><a href="#">Örnek Menü 14B</a></li>
                                  <li><a href="#">Örnek Menü 14C</a></li>
                     </ul>
                     </li>                
                     </ul>

       <li><a href="#">Örnek Menü 2</a>
                    <ul class="altmenu">
                      <li><a href="#">Örnek Menü 21</a></li>
                      <li><a href="#">Örnek Menü 22</a></li>
                      <li><a href="#">Örnek Menü 23</a>
                                  <ul class="altmenu">
                                  <li><a href="#">Örnek Menü 23 A</a></li>
                                  <li><a href="#">Örnek Menü 23 B</a></li>
                                  <li><a href="#">Örnek Menü 23 C</a></li>
                    </ul>
                    </li>
                <li><a href="#">Örnek Menü 24</a></li>
                </ul>
                </li>
        <li><a href="#">Örnek Menü 3</a>
                           <ul class="altmenu">
                      <li><a href="#">Örnek Menü 31</a>

           <ul class="altmenu"><li><a href="#">Örnek Menü 31A</a></li>
                               <li><a href="#">Örnek Menü 31B</a></li>
                               <li><a href="#">Örnek Menü 31C</a></li>
                               <li><a href="#">Örnek Menü 31D</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 32</a></li>
                      <li><a href="#">Örnek Menü 33 </a></li>


                </ul>
        <li><a href="#">Örnek Menü 4 </a>
                           <ul class="altmenu">
                      <li><a href="#">Örnek Menü 41</a></li>
                      <li><a href="#">Örnek Menü 42</a>

           <ul class="altmenu"><li><a href="#">Örnek Menü 42A</a></li>
                               <li><a href="#">Örnek Menü 42B</a></li>
                               <li><a href="#">Örnek Menü 42C</a></li>
                               <li><a href="#">Örnek Menü 42D</a>
                </ul>
                </li>

                     <li><a href="#">Örnek Menü 43</a></li>
                </ul>

                      <li><a href="#">Örnek Menü 5</a>
                           <ul class="altmenu">
                      <li><a href="#">Örnek Menü 51</a>

           <ul class="altmenu"><li><a href="#">Örnek Menü 511</a></li>
                               <li><a href="#">Örnek Menü 512</a></li>
                </ul>
                </li>
                     </ul>
                      <li><a href="#">Örnek Menü 6</a>
                         <ul class="altmenu">
                         <li><a href="#">Örnek Menü 611</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 7</a>
                     <ul class="altmenu">
                         <li><a href="#">Örnek Menü 71</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 8</a>
                     <ul class="altmenu">
                         <li><a href="#">Örnek Menü 81</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 9</a>
                     <ul class="altmenu">
                         <li><a href="#">Örnek Menü 91</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 10</a>
                     <ul class="altmenu">
                         <li><a href="#">Örnek Menü 101</a></li>
                </ul>
                </li>

</div>


</body>


</html>

Gönderen zaman: Hiç yorum yok:
Etiketler: , , ,

24 Ekim 2016 Pazartesi


















Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)