[CSS]用css實現圓的圖型menu

Posted on 由
LINEで送る
[`evernote` not found]

直接用icon排出來的menu看起來還蠻可愛蠻好用的吧
有興趣可以到作者的網站實際體驗一下

下面是用FIREBUG節錄出來能有關的css跟html：

html：

<ul id="menu">
	<li class="home"><a href="#url"><b>HOME</b></a></li>
	<li class="pencil"><a href="#url"><b>DRAW</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#url" class="p1 pencil1"><b>Draw 1</b></a></li>
			<li><a href="#url" class="p2 pencil2"><b>Draw 2</b></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="chat"><a href="#url"><b>CHAT</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#url" class="p2 chat1"><b>Chat 1</b></a></li>
			<li><a href="#url" class="p3 chat2"><b>Chat 2</b></a></li>
			<li><a href="#url" class="p4 chat3"><b>Chat 3</b></a></li>
			<li><a href="#url" class="p5 chat4"><b>Chat 4</b></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="image"><a href="#url"><b>PHOTO</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#url" class="p3 image1"><b>Photo 1</b></a></li>
			<li><a href="#url" class="p4 image2"><b>Photo 2</b></a></li>
			<li><a href="#url" class="p5 image3"><b>Photo 3</b></a></li>
			<li><a href="#url" class="p6 image4"><b>Photo 4</b></a></li>
			<li><a href="#url" class="p7 image5"><b>Photo 5</b></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="shop"><a href="#url"><b>SHOP</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#url" class="p4 shop1"><b>Shop 1</b></a></li>
			<li><a href="#url" class="p5 shop2"><b>Shop 2</b></a></li>
			<li><a href="#url" class="p6 shop3"><b>Shop 3</b></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="cash"><a href="#url"><b>MONEY</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#url" class="p5 money1"><b>Money 1</b></a></li>
			<li><a href="#url" class="p6 money2"><b>Money 2</b></a></li>
			<li><a href="#url" class="p7 money3"><b>Money 3</b></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="music"><a href="#url"><b>AUDIO</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#url" class="p6 sound1"><b>Audio 1</b></a></li>
			<li><a href="#url" class="p7 sound2"><b>Audio 2</b></a></li>
			<li><a href="#url" class="p8 sound3"><b>Audio 3</b></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="mail"><a href="#url"><b>MAIL</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#url" class="p7 mail1"><b>Mail 1</b></a></li>
			<li><a href="#url" class="p8 mail2"><b>Mail 2</b></a></li>
			<li><a href="#url" class="p1 mail3"><b>Mail 3</b></a></li>
			<li><a href="#url" class="p2 mail4"><b>Mail 4</b></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>

css:

#info {
padding-bottom:100px;
}
#menu {
height:270px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
padding:0;
position:relative;
width:270px;
}
#menu ul {
background:transparent url(trans.gif) repeat scroll 0 0;
height:140px;
left:-9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:absolute;
width:140px;
}
#menu li {
color:#000000;
display:block;
height:70px;
position:absolute;
text-decoration:none;
width:70px;
}
#menu li a {
color:#000000;
display:block;
height:70px;
text-decoration:none;
width:70px;
}
#menu li a b {
display:block;
font-family:arial,sans-serif;
font-size:12px;
height:25px;
left:-9999px;
position:absolute;
text-align:center;
width:58px;
}
#menu li.home {
background:transparent url(c-icons/home.gif) repeat scroll 0 0;
left:100px;
top:0;
}
#menu li.pencil {
background:transparent url(c-icons/pencil.gif) repeat scroll 0 0;
left:170px;
top:30px;
}
#menu li.chat {
background:transparent url(c-icons/chat.gif) repeat scroll 0 0;
left:200px;
top:100px;
}
#menu li.image {
background:transparent url(c-icons/image.gif) repeat scroll 0 0;
left:170px;
top:170px;
}
#menu li.shop {
background:transparent url(c-icons/shop.gif) repeat scroll 0 0;
left:100px;
top:200px;
}
#menu li.cash {
background:transparent url(c-icons/money.gif) repeat scroll 0 0;
left:30px;
top:170px;
}
#menu li.music {
background:transparent url(c-icons/sound.gif) repeat scroll 0 0;
left:0;
top:100px;
}
#menu li.mail {
background:transparent url(c-icons/mail.gif) repeat scroll 0 0;
left:30px;
top:30px;
}
#menu li a:hover {
border:0 none;
z-index:500;
}
#menu li.home a:hover ul, #menu li.home:hover ul {
left:-35px;
top:65px;
}
#menu li.pencil a:hover ul, #menu li.pencil:hover ul {
left:-105px;
top:35px;
}
#menu li.chat a:hover ul, #menu li.chat:hover ul {
left:-135px;
top:-35px;
}
#menu li.image a:hover ul, #menu li.image:hover ul {
left:-105px;
top:-105px;
}
#menu li.shop a:hover ul, #menu li.shop:hover ul {
left:-35px;
top:-135px;
}
#menu li.cash a:hover ul, #menu li.cash:hover ul {
left:35px;
top:-105px;
}
#menu li.music a:hover ul, #menu li.music:hover ul {
left:65px;
top:-35px;
}
#menu li.mail a:hover ul, #menu li.mail:hover ul {
left:30px;
top:35px;
}
#menu :hover ul li {
height:40px;
width:40px;
}
#menu :hover ul li a {
display:block;
height:40px;
position:absolute;
width:40px;
}
#menu li ul li a.p1 {
left:70px;
top:0;
}
#menu li ul li a.p2 {
left:98px;
top:30px;
}
#menu li ul li a.p3 {
left:98px;
top:70px;
}
#menu li ul li a.p4 {
left:70px;
top:100px;
}
#menu li ul li a.p5 {
left:30px;
top:100px;
}
#menu li ul li a.p6 {
left:0;
top:70px;
}
#menu li ul li a.p7 {
left:0;
top:30px;
}
#menu li ul li a.p8 {
left:30px;
top:0;
}
#menu li.home a:hover b, #menu li.home:hover b {
left:5px;
top:125px;
}
#menu li.pencil a:hover b, #menu li.pencil:hover b {
left:-65px;
top:95px;
}
#menu li.chat a:hover b, #menu li.chat:hover b {
left:-95px;
top:25px;
}
#menu li.image a:hover b, #menu li.image:hover b {
left:-65px;
top:-45px;
}
#menu li.shop a:hover b, #menu li.shop:hover b {
left:5px;
top:-75px;
}
#menu li.cash a:hover b, #menu li.cash:hover b {
left:75px;
top:-45px;
}
#menu li.music a:hover b, #menu li.music:hover b {
left:105px;
top:25px;
}
#menu li.mail a:hover b, #menu li.mail:hover b {
left:70px;
top:95px;
}
#menu li.home a:hover ul li a b, #menu li.pencil a:hover ul li a b, #menu li.chat a:hover ul li a b, #menu li.image a:hover ul li a b, #menu li.shop a:hover ul li a b, #menu li.cash a:hover ul li a b, #menu li.music a:hover ul li a b, #menu li.mail a:hover ul li a b, #menu li.home:hover ul li a b, #menu li.pencil:hover ul li a b, #menu li.chat:hover ul li a b, #menu li.image:hover ul li a b, #menu li.shop:hover ul li a b, #menu li.cash:hover ul li a b, #menu li.music:hover ul li a b, #menu li.mail:hover ul li a b {
background:#FFFFFF none repeat scroll 0 0;
left:-9999px;
}
#menu li ul li a.pencil1 {
background:transparent url(c-icons/pencil1.gif) repeat scroll 0 0;
}
#menu li ul li a.pencil2 {
background:transparent url(c-icons/pencil2.gif) repeat scroll 0 0;
}
#menu li ul li a.chat1 {
background:transparent url(c-icons/chat1.gif) repeat scroll 0 0;
}
#menu li ul li a.chat2 {
background:transparent url(c-icons/chat2.gif) repeat scroll 0 0;
}
#menu li ul li a.chat3 {
background:transparent url(c-icons/chat3.gif) repeat scroll 0 0;
}
#menu li ul li a.chat4 {
background:transparent url(c-icons/chat4.gif) repeat scroll 0 0;
}
#menu li ul li a.image1 {
background:transparent url(c-icons/image1.gif) repeat scroll 0 0;
}
#menu li ul li a.image2 {
background:transparent url(c-icons/image2.gif) repeat scroll 0 0;
}
#menu li ul li a.image3 {
background:transparent url(c-icons/image3.gif) repeat scroll 0 0;
}
#menu li ul li a.image4 {
background:transparent url(c-icons/image4.gif) repeat scroll 0 0;
}
#menu li ul li a.image5 {
background:transparent url(c-icons/image5.gif) repeat scroll 0 0;
}
#menu li ul li a.shop1 {
background:transparent url(c-icons/shop1.gif) repeat scroll 0 0;
}
#menu li ul li a.shop2 {
background:transparent url(c-icons/shop2.gif) repeat scroll 0 0;
}
#menu li ul li a.shop3 {
background:transparent url(c-icons/shop3.gif) repeat scroll 0 0;
}
#menu li ul li a.money1 {
background:transparent url(c-icons/money1.gif) repeat scroll 0 0;
}
#menu li ul li a.money2 {
background:transparent url(c-icons/money2.gif) repeat scroll 0 0;
}
#menu li ul li a.money3 {
background:transparent url(c-icons/money3.gif) repeat scroll 0 0;
}
#menu li ul li a.sound1 {
background:transparent url(c-icons/sound1.gif) repeat scroll 0 0;
}
#menu li ul li a.sound2 {
background:transparent url(c-icons/sound2.gif) repeat scroll 0 0;
}
#menu li ul li a.sound3 {
background:transparent url(c-icons/sound3.gif) repeat scroll 0 0;
}
#menu li ul li a.mail1 {
background:transparent url(c-icons/mail1.gif) repeat scroll 0 0;
}
#menu li ul li a.mail2 {
background:transparent url(c-icons/mail2.gif) repeat scroll 0 0;
}
#menu li ul li a.mail3 {
background:transparent url(c-icons/mail3.gif) repeat scroll 0 0;
}
#menu li ul li a.mail4 {
background:transparent url(c-icons/mail4.gif) repeat scroll 0 0;
}
#menu :hover ul li a.p1:hover b {
left:-30px;
top:60px;
}
#menu :hover ul li a.p2:hover b {
left:-58px;
top:30px;
}
#menu :hover ul li a.p3:hover b {
left:-58px;
top:-10px;
}
#menu :hover ul li a.p4:hover b {
left:-30px;
top:-40px;
}
#menu :hover ul li a.p5:hover b {
left:10px;
top:-40px;
}
#menu :hover ul li a.p6:hover b {
left:40px;
top:-10px;
}
#menu :hover ul li a.p7:hover b {
left:40px;
top:30px;
}
#menu :hover ul li a.p8:hover b {
left:10px;
top:60px;
}

8 則迴響於《[CSS]用css實現圓的圖型menu》

回應已關閉。