Best Blogger Menus: Multilevel Dropdown menu model click-1

Hanya dengan kode css dan yang berbeda dari multilevel dropdown menu ini adalah penggunaan fungsi klik untuk mengaktifkan menu. Anak menu akan terlihat bukan melalui model hover, seperti yang sudah biasa kita buat dan lihat, namun dengan cara "klik" di menu "induknya". Metode klik ini sama sekali tanpa javascript. Tetap menggunakan kode css. CSS dan CSS3 menjadi kunci terbangunnya menu spesial ini.

Demo menu bisa anda lihat tepat di atas posting ini!

Kode CSS

#GRddclick_agst04{position:relative;z-index:100;}
#GRddclick_agst04 ul,#GRddclick_agst04 li{
      padding:0;
      margin:0;
      list-style:none;
}
#GRddclick_agst04 ul{
      padding:6px;
      border-radius:4px;
      background:#6b6b6b;
      background:-moz-linear-gradient(top, #6b6b6b 0%, #a0a0a0 24%, #a0a0a0 80%, #6b6b6b 100%);
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b6b6b), color-stop(24%,#a0a0a0), color-stop(80%,#a0a0a0), color-stop(100%,#6b6b6b));
      background:-webkit-linear-gradient(top, #6b6b6b 0%,#a0a0a0 24%,#a0a0a0 80%,#6b6b6b 100%);
      background:-o-linear-gradient(top, #6b6b6b 0%,#a0a0a0 24%,#a0a0a0 80%,#6b6b6b 100%);
      background:-ms-linear-gradient(top, #6b6b6b 0%,#a0a0a0 24%,#a0a0a0 80%,#6b6b6b 100%);
      background:linear-gradient(to bottom, #6b6b6b 0%,#a0a0a0 24%,#a0a0a0 80%,#6b6b6b 100%);
      filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#6b6b6b',GradientType=0 );
      box-shadow:0 15px 10px -15px rgba(0,0,0,0.8);
}
#GRddclick_agst04 ul.level1{
      height:30px;
}
#GRddclick_agst04 ul ul{
      position:absolute;
      padding:4px 4px 0 4px;
      left:-5px;
      width:122px;
      top:30px;
      display:none;
      border-radius:0 0 4px 4px;
}
#GRddclick_agst04 ul ul ul{
      position:absolute;
      background:rgba(255,0,0,.6);
      left:130px;
      width:122px;
      top:-5px;
      display:none;
      border-radius:0 5px 5px 5px;
}
#GRddclick_agst04 ul li{
      margin-right:2px;
      float:left;
      position:relative;
}
#GRddclick_agst04 ul li a{
      display:block;
      padding:8px 12px 8px 5px;
      font:bold 12px arial, sans-serif;
      color:#fff;
      text-decoration:none;
      border-radius:3px;
      background:rgba(0,0,0,.4);  
}
#GRddclick_agst04 ul li span{
      display:block;
      padding:8px 12px 8px 5px;
      float:left;
      font:bold 12px arial, sans-serif;
      color:#fff;
      cursor:default;
      position:relative;
      border-radius:3px;
      background:rgba(0,0,0,.5);
}
#GRddclick_agst04 ul ul li{margin:0 0px 5px 0;}
#GRddclick_agst04 ul ul li a,
#GRddclick_agst04 ul ul li span{width:105px;}
#GRddclick_agst04 ul li:hover > a,
#GRddclick_agst04 ul li:hover > span{
      color:#3CF;
      background: #222;
      transition:1s;
      -o-transition:1s;
      -ms-transition:1s;
      -moz-transition:1s;
      -webkit-transition:1s;
}
#GRddclick_agst04 li:hover span{color:yellow;}
#GRddclick_agst04 ul li span:focus + ul{display:block;}
#GRddclick_agst04 ul li ul:hover{display:block}
#GRddclick_agst04 img.close{display:none; width:100%;height:100%;position:fixed;left:0;top:0;z-index:-1;}
#GRddclick_agst04 ul:hover{display:block;}
#GRddclick_agst04 ul.level1 li{width:130px;}
#GRddclick_agst04 ul.level1 li span{
      width:115px;
      padding:6px 10px 6px 5px;
      text-align:center;
}
#GRddclick_agst04 ul.level1 li.induk{
      background:rgba(255,0,0,.3);
      z-index:101;
      position:relative;
      padding:2px;
}
#GRddclick_agst04 ul.level1 li.induk span:before{
      content:url(https://lh4.googleusercontent.com/-mMxqiqnZJ3o/UBkGYaDhUyI/AAAAAAAADBY/YvMwVnexPqM/s128/GRred-arrow-circle-down-16x16.png);
      color:#fff;
      position:absolute;
      top:6px;  
      right:3px;
      font-size:22px;
      font-weight:700;
}
#GRddclick_agst04 ul.level1 li.induk span:hover:before{
      content:url(https://lh4.googleusercontent.com/-6ZeWm4Hvia4/UBf8M7oJGOI/AAAAAAAAC-Y/yUt4mdI7f-M/s128/icon_add_hover.gif);
      color:#fff;
      position:absolute;
      top:6px;  
      right:3px;
      font-size:22px;
      font-weight:700;
}
#GRddclick_agst04 ul.level1 li.short{width:100px;}
#GRddclick_agst04 ul.level1 li.short a{padding-right:5px;}
#GRddclick_agst04 ul.level1 li{text-shadow:1px 1px 1px #000;}
#GRddclick_agst04 ul.level1 li{text-align:center;}
#GRddclick_agst04 ul.level1 ul>li{text-align:left;}

xHTML

<div id="GRddclick_agst04">
	<ul class="level1">
		<li class="short"><a href="http://bestbloggerGRddclick_agst04s.blogspot.com" target="_blank">Home</a></li>
        <li class="short"><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></li>
		<li class="induk"><span tabindex="1">Menu-first</span>                           <!-- First -->
			<ul>
				<li><a href="URL">Menu-first-A</a></li>
				<li><a href="URL">Menu-first-B</a></li>
				<li><a href="URL">Menu-first-C</a></li>
				<li><a href="URL">Menu-first-D</a></li>
			</ul>
		</li>
		<li class="induk"><span tabindex="1">Menu-Second</span>                          <!-- Second -->  
			<ul>
				<li><a href="URL">Menu-Second-A</a></li>
				<li class="induk"><span tabindex="1">Menu-Second-B</span>
					<ul>
						<li><a href="URL">Menu-Second-B1</a></li>
						<li><a href="URL">Menu-Second-B2</a></li>
 						<li><a href="URL">Menu-Second-B3</a></li>
						<li><a href="URL">Menu-Second-B4</a></li>                       
						<li class="induk"><span tabindex="1">Menu-Second-B5</span>
							<ul>
								<li><a href="URL">Menu-Second-B5a</a></li>
								<li><a href="URL">Menu-Second-B5b</a></li>
								<li><a href="URL">Menu-Second-B5c</a></li>
								<li><a href="URL">Menu-Second-B5d</a></li>
								<li><a href="URL">Menu-Second-B5e</a></li>
								<li><a href="URL">Menu-Second-B5f</a></li>
								<li><a href="URL">Menu-Second-B5g</a></li>
								<li><a href="URL">Menu-Second-B5h</a></li>                                
							</ul>
						</li>                                               
						<li><a href="URL">Menu-Second-B6</a></li>                         
						<li><a href="URL">Menu-Second-B7</a></li>
						<li><a href="URL">Menu-Second-B8</a></li>
					</ul>
				</li>
				<li><a href="URL">Menu Second-C</a></li>
				<li><a href="URL">Menu Second-D</a></li>                
				<li><a href="URL">Menu Second-E</a></li>                
				<li class="induk"><span tabindex="1">Menu Second-F</span>
					<ul>
						<li><a href="URL">Menu Second-F1</a></li>
						<li><a href="URL">Menu Second-F2</a></li>
						<li><a href="URL">Menu Second-F3</a></li>
						<li><a href="URL">Menu Second-F4</a></li>
 						<li><a href="URL">Menu Second-F5</a></li>
						<li><a href="URL">Menu Second-F6</a></li>
						<li><a href="URL">Menu Second-F7</a></li>                       
					</ul>
				</li>
				<li class="induk"><span tabindex="1">Menu Second-G</span>
					<ul>
						<li><a href="URL">Menu Second-G1</a></li>
						<li><a href="URL">Menu Second-G2</a></li>
						<li><a href="URL">Menu Second-G3</a></li>
						<li><a href="URL">Menu Second-G4</a></li>
 						<li><a href="URL">Menu Second-G5</a></li>
						<li><a href="URL">Menu Second-G6</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="induk"><span tabindex="1">Menu Third</span>                                <!-- Third -->
			<ul>
				<li><a href="URL">Menu Third-A</a></li>
				<li><a href="URL">Menu Third-B</a></li>
				<li class="induk"><span tabindex="1">Menu Third-C</span>
					<ul>
						<li><a href="URL">Menu Third-C1</a></li>
						<li><a href="URL">Menu Third-C2</a></li>
						<li><a href="URL">Menu Third-C3</a></li>
						<li><a href="URL">Menu Third-C4</a></li>                        
						<li class="induk"><span tabindex="1">Menu Third-C4</span>
							<ul>
								<li><a href="URL">Menu Third-C4a</a></li>
								<li><a href="URL">Menu Third-C4b</a></li>
								<li><a href="URL">Menu Third-C4c</a></li>
								<li><a href="URL">Menu Third-C4d</a></li>
							</ul>
						</li>
						<li><a href="URL">Menu Third-C5</a></li>
						<li><a href="URL">Menu Third-C6</a></li>
					</ul>
				</li>
				<li class="induk"><span tabindex="1">Menu Third-D</span>
					<ul>
						<li><a href="URL">Menu Third-D1</a></li>
						<li><a href="URL">Menu Third-D2</a></li>
						<li><a href="URL">Menu Third-D3</a></li>
						<li><a href="URL">Menu Third-D4</a></li>
					</ul>
				</li>
				<li><a href="URL">Menu Third-E</a></li>
			</ul>
		</li>
		<li class="induk"><span tabindex="1">Menu Four</span>                               <!-- Four --> 
			<ul>
				<li><a href="URL">Menu Four-A</a></li>
				<li><a href="URL">Menu Four-B</a></li>
				<li><a href="URL">Menu Four-C</a></li>
				<li><a href="URL">Menu Four-D</a></li>
			</ul>
		</li>
		<li class="induk"><span tabindex="1">Best Tutorials</span>
			<ul>
				<li><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></li>
				<li><a href="http://gubhugreyot.blogdetik.com" target="_blank">GR blogdetik</a></li>
				<li><a href="http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com" target="_blank">Demo Tutorial-1</a></li>
				<li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank">Demo Tutorial-2</a></li>								
				<li><a href="http://bestbloggerhack.blogspot.com" target="_blank">best blogger hack</a></li> 
				<li><a href="http://gitosimin.blogspot.com" target="_blank">Mas Gitosamin</a></li>
				<li><a href="http://bgsgr.blogspot.com" target="_blank">Demo Tutorial css3</a></li>
				<li><a href="http://tantytm.blogspot.com" target="_blank">Modifikasi blog</a></li>
                <li><a href="http://bloggerstuars.blogspot.com" target="_blank">Bloggerstars</a></li>                
				<li><a href="http://lightbox-demo-tutorial.blogspot.com" target="_blank">Lightbox for Blogger</a></li>
			</ul>
		</li>        
        </li>
	</ul>
</div>

Best Blogger Menus

click_ddmenu-1

Sabtu, 04 Agustus 2012

Multilevel Dropdown menu model click-1

Kode CSS

xHTML

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Archive

My Profile C l o s e

Me

Follower C l o s e

My Brothers

RSS C l o s e

Label C l o s e

Label