GRddmultilevelmenu-3

Close X

Jumat, 03 Agustus 2012

Multilevel dropdown horizontal menu for blogger-3

Masih mengandalkan kode css tanpa satupun javascript, namun tetap menarik dan penuh pesona. Inilah css meultilevel dropdown menu yang mengandalkan permainan background gradien css3.
Warna hover menu dapat anda rubah dengan sedikit merubah warna background dan class yang digunakan. Anda bisa lihat pada kode berikut dan kode yang bertanda warna merah :

.GRdd03Agst.red li:hover > a{
    background-color:rgba(255,0,0,.5); /* warna red dalam rgba */
    color:yellow;
    text-shadow:1px 1px 1px #000;
}

dan xHTML :

<div class="GRdd03Agst red">

Kode CSS

.GRdd03Agst{
    position:relative;
    width:750px;
    margin:0 auto;
    text-align:center;
    }
.GRdd03Agst ul{
    margin:0;
    list-style:none;
    white-space:nowrap;
    text-align:left;
    display:inline-block;   
    background:#4e5054;
    background:-moz-linear-gradient(top,#4e5054 0%,#9aa0a5 14%,#8b9393 51%,#252828 99%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4e5054), color-stop(14%,#9aa0a5),color-stop(51%,#8b9393),color-stop(99%,#252828));
    background:-webkit-linear-gradient(top, #4e5054 0%,#9aa0a5 14%,#8b9393 51%,#252828 99%);
    background:-o-linear-gradient(top,#4e5054 0%,#9aa0a5 14%,#8b9393 51%,#252828 99%);
    background:-ms-linear-gradient(top,#4e5054 0%,#9aa0a5 14%,#8b9393 51%,#252828 99%);
background: linear-gradient(to bottom, #4e5054 0%,#9aa0a5 14%,#8b9393 51%,#252828 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e5054', endColorstr='#252828',GradientType=0);
    padding:10px;
    border-radius:5px;
    box-shadow:2px 3px 5px rgba(0,0,0,0.4);
}
.GRdd03Agst ul{display:inline;}
.GRdd03Agst li{margin:0;padding:0;list-style:none;}
.GRdd03Agst li{display:inline-block;display:inline;}
.GRdd03Agst ul ul{
    position:absolute;
    left:-9999px;
    border-radius:0 0 5px 5px;
}
.GRdd03Agst ul ul ul{border-radius:5px;}
.GRdd03Agst.red ul ul{background-color:#d00;}
.GRdd03Agst > ul{display:table;margin:0 auto;}
.GRdd03Agst > ul > li{float:left;display:block;position:relative;z-index:100;}
.GRdd03Agst > ul > li:hover{display:inline-block;z-index:10;}
.GRdd03Agst ul a{
    display:block;
    font:15px/30px "arial",sans-serif;
    color:#fff;
    text-decoration:none;
    padding:0 20px;
}
.GRdd03Agst > ul > li > a{border-radius:5px 5px 0 0;}
.GRdd03Agst > ul > li:first-child > a,
.GRdd03Agst > ul > li:last-child > a{border-radius:5px;}
.GRdd03Agst ul ul a{
    padding:0 10px;
    margin:5px 0;
    line-height:25px;
    border:1px solid #000;
    border-color:rgba(255,255,255,0.4) rgba(0,0,0,0.2) rgba(0,0,0,0.3) rgba(255,255,255,0.3);
    text-shadow:0 -1px 2px rgba(0, 0, 0, 0.6);
    background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
}
.GRdd03Agst ul li:hover > ul{left:0;top:30px;z-index:-1;}
.GRdd03Agst ul ul li:hover > ul{left:100%;
    top:auto;
    margin-top:-47px;
    margin-left:-10px;
    z-index:10;
}
.GRdd03Agst > ul > li:nth-of-type(5):hover > ul{
    left:auto;
    right:0;
    top:30px;
    z-index:-1;
    text-align:right;
    box-shadow:-2px 3px 5px rgba(0,0,0,0.4);
}
.GRdd03Agst > ul > li:nth-of-type(5) ul li:hover > ul{
    left:auto;
    right:100%;
    top:auto;
    margin-top:-47px;
    margin-right:-10px;
    z-index:10;
    text-align:right;
    box-shadow:-2px 3px 5px rgba(0,0,0,0.4);
}
.GRdd03Agst li.left ul a{text-align:right;}
.GRdd03Agst ul ul li:hover > a{
    text-shadow:0 1px 2px rgba(0, 0, 0, 0.6);
    background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
    background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
    background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
    background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
    background-image:linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
    border-color:rgba(0,0,0,0.3) rgba(255,255,255,0.4) rgba(255,255,255,0.3) rgba(0,0,0,0.1);
}
.GRdd03Agst.red li > a{
    background-color:rgba(50,50,50,.5);
    text-shadow:1px 1px 1px #000;
    margin-right:1px;
    transition:0.6s;
    -o-transition:0.6s;
    -ms-transition:0.6s;
    -moz-transition:0.6s;
    -webkit-transition:0.6s;
}
.GRdd03Agst.red li:hover > a{
    background-color:rgba(255,0,0,.5);
    color:yellow;
    text-shadow:1px 1px 1px #000;
}
.GRdd03Agst span{display:block;position:absolute;right:9999px;top:-35px;}

Kode CSS

<div class="GRdd03Agst red">
	<ul>
		<li><a href="#URL">Home</a></li>
		<li><a href="#URL">Menu-1 &#8250;</a>
			<ul>
				<li><a href="#URL">Menu-1a</a></li>
				<li><a href="#URL">Menu-1b</a></li>
				<li><a href="#URL">Menu-1c</a></li>
				<li><a href="#URL">Menu-1d</a></li>
			</ul>
		</li>
		<li><a href="#URL">Menu-2 &#8250;</a>
			<ul>
				<li><a href="#URL">Menu-2a</a></li>
				<li><a href="#URL">Menu-2b &#8250;</a>
					<ul>
						<li><a href="#URL">Menu-2b-01</a></li>
						<li><a href="#URL">Menu-2b-02</a></li>
						<li><a href="#URL">Menu-2b-03 &#8250;</a>
							<ul>
								<li><a href="#URL">Menu-2b-03a</a></li>
								<li><a href="#URL">Menu-2b-03b</a></li>
								<li><a href="#URL">Menu-2b-03c</a></li>
								<li><a href="#URL">Menu-2b-03d</a></li>
							</ul>
						</li>
						<li><a href="#URL">Menu-2b-03</a></li>
					</ul>
				</li>
				<li><a href="#URL">Menu-2c</a></li>
				<li><a href="#URL">Menu-2d &#8250;</a>
					<ul>
						<li><a href="#URL">Menu-2d-01</a></li>
						<li><a href="#URL">Menu-2d-02</a></li>
						<li><a href="#URL">Menu-2d-03</a></li>
						<li><a href="#URL">Menu-2d-04</a><b></b></li>
					</ul>
				</li>
				<li><a href="#URL">Menu-2e &#8250;</a>
					<ul>
						<li><a href="#URL">Menu-2e-01</a></li>
						<li><a href="#URL">Menu-2e-02</a></li>
						<li><a href="#URL">Menu-2e-03</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#URL">Menu-3 &#8250;</a>
			<ul>
				<li><a href="#URL">Menu-3a</a></li>
				<li><a href="#URL">Menu-3b</a></li>
				<li><a href="#URL">Menu-3c</a></li>
				<li><a href="#URL">Menu-3d</a></li>
			</ul>
		</li>
		<li class="left"><a href="#URL">Menu-4 &#8250;</a>
			<ul>
				<li><a href="#URL">Menu-4a</a></li>
				<li><a href="#URL">&#8249; Menu-4b</a>
					<ul>
						<li><a href="#URL">Menu-4b-01</a></li>
						<li><a href="#URL">Menu-4b-02</a></li>
						<li><a href="#URL">&#8249; Menu-4b-03</a>
							<ul>
								<li><a href="#URL">Menu-4b-03a</a></li>
								<li><a href="#URL">Menu-4b-03b</a></li>
								<li><a href="#URL">Menu-4b-03c</a></li>
								<li><a href="#URL">Menu-4b-03d</a></li>
							</ul>
						</li>
						<li><a href="#URL">Menu-4b-04</a></li>
						<li><a href="#URL">Menu-4b-05</a></li>
					</ul>
				</li>
				<li><a href="#URL">&#8249; Menu-4c</a>
					<ul>
						<li><a href="#URL">Menu-4c-01</a></li>
						<li><a href="#URL">Menu-4c-02</a></li>
						<li><a href="#URL">Menu-4c-03</a></li>
						<li><a href="#URL">Menu-4c-04</a></li>
					</ul>
				</li>
				<li><a href="#URL">Menu-4d</a></li>
			</ul>
		</li>
		<li><a href="#URL">Menu-5</a></li>
	</ul>
	<span><a href="#x">Close X</a></span>
</div>

Diposting oleh di
Label: , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

FollowerC l o s e