Multilevel_ddmenu-2

Close X

Jumat, 03 Agustus 2012

Multilevel dropdown horizontal menu for blogger-2

CSS multilevel dropdown menu dengan backgrund hover yang dengan mudah dapat dirubah. Anda tinggal merubah class dan menambah warna yang diinginkan maka sebuah background dengan warna berbeda pada hover setiap menu segera dapat terlihat.
Bentuk kode css yang harus dirubah :
.GRmultileveldd03agst12.lime li:hover > a {background-color:lime;}
Bentuk kode html yang harus disesuaikan:
<div class="GRmultileveldd03agst12 lime">

Kode CSS

.GRmultileveldd03agst12{
    position:relative;
    width:750px;
    margin:0 auto;
    text-align:center;
}
.GRmultileveldd03agst12 ul{
    margin:0;
    list-style:none;
    white-space:nowrap;
    text-align:left;
    display:inline-block;
    background:#000;
    padding:5px 20px;
    background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    background-image:linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    border:1px solid #888;
    border-radius:6px;
    box-shadow:0 0 5px rgba(0,0,0,0.4);
    }
.GRmultileveldd03agst12 ul {display:inline;}
.GRmultileveldd03agst12 li {
    margin:0;
    padding:0;
    list-style:none;
    }
.GRmultileveldd03agst12 li {
    display:inline-block;
    display:inline;
}
.GRmultileveldd03agst12 ul ul {
    position:absolute;
    opacity:0;
    left:-100%;
    top:-400px;
    padding:0;
    display:none;
    }
.GRmultileveldd03agst12:hover ul ul {
    display:block;
    }
.GRmultileveldd03agst12 > ul{display:table; margin:0 auto;}
.GRmultileveldd03agst12 > ul > li{float:left; display:block; position:relative; z-index:100;}
.GRmultileveldd03agst12 > ul > li:hover{
    display:inline-block;
    z-index:10;
    }
.GRmultileveldd03agst12 ul a {
    display:block;
    font:13px/30px arial,sans-serif;
    color:#fff;
    text-decoration:none;
    padding:0 15px;
    }
.GRmultileveldd03agst12 ul li ul > ul{
    left:-1px;
    top:30px;
    opacity:0;
    filter:alpha(oacity=0);
    z-index:-1;  
    transition:0s;
    -o-transition:0s;
    -ms-transition:0s;
    -moz-transition:0s;
    -webkit-transition:0s;       
    }
.GRmultileveldd03agst12 ul a{
    transition:0.6s;
    -o-transition:0.6s;
    -ms-transition:0.6s;
    -moz-transition:0.6s;
    -webkit-transition:0.6s;
    }
.GRmultileveldd03agst12 ul a,.GRmultileveldd03agst12 ul li:hover > ul {
    transition:0.4s 0.4s;
    -o-transition:0.4s 0.4s;
    -ms-transition:0.4s 0.4s;
    -moz-transition:0.4s 0.4s;
    -webkit-transition:0.4s 0.4s;
    }

.GRmultileveldd03agst12 ul li:hover > ul {
    left:-1px;
    opacity:1.0;
    filter:alpha(oacity=100);
    top:30px;
    z-index:-1;          
    }
.GRmultileveldd03agst12 ul li.left:hover > ul {
    left:auto;
    right:-1px;
    top:30px;
    z-index:-1;
    }
.GRmultileveldd03agst12 ul ul li:hover > ul {
    left:100%;
    top:auto;
    margin-top:-31px;
    margin-left:-10px;
    z-index:10;
    }
.GRmultileveldd03agst12 li.left ul li:hover > ul {
    left:auto;
    right:100%;
    top:auto;
    margin-top:-31px;
    margin-right:-10px;
    z-index:10;
    }
.GRmultileveldd03agst12 li.left ul a{text-align:right;}
.GRmultileveldd03agst12 li:hover > a{
    color:#222;
    text-shadow:1px 1px 2px rgba(255, 255, 255, 0.6);
    background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    background-image:linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
    border-radius:5px;
    }
.GRmultileveldd03agst12 ul ul li:hover a {
    border-radius:0px;
    }
.GRmultileveldd03agst12 ul ul li:first-child > a {
    border-radius:5px 5px 0 0;
    }
.GRmultileveldd03agst12 ul ul li:last-child > a {
    border-radius:0 0 5px 5px;
    }
.GRmultileveldd03agst12.grey li:hover > a {
    background-color:#999;
    }
.GRmultileveldd03agst12 span{
    display:block;
    position:absolute;
    right:9999px;
    top:-35px;
    }

xHTML

<div class="GRmultileveldd03agst12 grey">
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="index.html">Menu-1 &#8250;</a>
			<ul>
				<li><a href="index.html">Menu-1a</a></li>
				<li><a href="index.html">Menu-1b</a></li>
				<li><a href="index.html">Menu-1c</a></li>
				<li><a href="index.html">Menu-1d</a></li>
			</ul>
		</li>
		<li><a href="index.html">Menu-2 &#8250;</a>
			<ul>
				<li><a href="index.html">Menu-2a</a></li>
				<li><a href="index.html">Menu-2b &#8250;</a>
					<ul>
						<li><a href="index.html">Menu-2b-01</a></li>
						<li><a href="index.html">Menu-2b-02</a></li>
						<li><a href="index.html">Menu-2b-03 &#8250;</a>
							<ul>
								<li><a href="index.html">Menu-2b-03a</a></li>
								<li><a href="index.html">Menu-2b-03b</a></li>
								<li><a href="index.html">Menu-2b-03c</a></li>
								<li><a href="index.html">Menu-2b-03d</a></li>
							</ul>
						</li>
						<li><a href="index.html">Menu-2b-03</a></li>
					</ul>
				</li>
				<li><a href="index.html">Menu-2c</a></li>
				<li><a href="index.html">Menu-2d &#8250;</a>
					<ul>
						<li><a href="index.html">Menu-2d-01</a></li>
						<li><a href="index.html">Menu-2d-02</a></li>
						<li><a href="index.html">Menu-2d-03</a></li>
						<li><a href="index.html">Menu-2d-04</a><b></b></li>
					</ul>
				</li>
				<li><a href="index.html">Menu-2e &#8250;</a>
					<ul>
						<li><a href="index.html">Menu-2e-01</a></li>
						<li><a href="index.html">Menu-2e-02</a></li>
						<li><a href="index.html">Menu-2e-03</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="index.html">Menu-3 &#8250;</a>
			<ul>
				<li><a href="index.html">Menu-3a</a></li>
				<li><a href="index.html">Menu-3b</a></li>
				<li><a href="index.html">Menu-3c</a></li>
				<li><a href="index.html">Menu-3d</a></li>
			</ul>
		</li>
		<li class="left"><a href="index.html">Menu-4 &#8250;</a>
			<ul>
				<li><a href="index.html">Menu-4a</a></li>
				<li><a href="index.html">&#8249; Menu-4b</a>
					<ul>
						<li><a href="index.html">Menu-4b-01</a></li>
						<li><a href="index.html">Menu-4b-02</a></li>
						<li><a href="index.html">&#8249; Menu-4b-03</a>
							<ul>
								<li><a href="index.html">Menu-4b-03a</a></li>
								<li><a href="index.html">Menu-4b-03b</a></li>
								<li><a href="index.html">Menu-4b-03c</a></li>
								<li><a href="index.html">Menu-4b-03d</a></li>
							</ul>
						</li>
						<li><a href="index.html">Menu-4b-04</a></li>
						<li><a href="index.html">Menu-4b-05</a></li>
					</ul>
				</li>
				<li><a href="index.html">&#8249; Menu-4c</a>
					<ul>
						<li><a href="index.html">Menu-4c-01</a></li>
						<li><a href="index.html">Menu-4c-02</a></li>
						<li><a href="index.html">Menu-4c-03</a></li>
						<li><a href="index.html">Menu-4c-04</a></li>
					</ul>
				</li>
				<li><a href="index.html">Menu-4d</a></li>
			</ul>
		</li>
		<li><a href="index.html">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