Welcome, Old Sport!

泡沫弹出框式的侧导航栏

by ilikecss ON 2010/08/10 4963

侧面导航有许多种类,各有各的优缺点。最近看到一个比较不错的泡沫提示框,于是我对JS和CSS及XHTML做了删选和修正,制作了一款泡沫弹出式的侧导航。下面就和大家一起分享。
Side Navigation Tooltip

Step1. 创建HTML

<ul class="side_nav">
    <li>
    <a href="#">Home</a>
    <div><p>Go home!</p></div>
    </li>
    <li>
    <a href="#">About Me</a>
    <div><p>Get to know me</p></div>
    </li>
    <li>
    <a href="#">Portfolio</a>
    <div><p>Get to check out my featured work!</p></div>
    </li>
    <li>
    <a href="#">Blog</a>
    <div><p>Tutorials, articles and resources.</p></div>
    </li>
    <li >
    <a href="#">Contact</a>
    <div><p>Don't hesitate to drop me a line</p></div>
    </li>
    <li>
    <a href="#">Contact</a>
    <div><p>News,Video and so on</p></div>
    </li>
</ul>
<div class="content_txt">
    <h4>Sunflowa Media</h4>
    <p>Sunflowa Media - Green,Reliable,Funny Web Design.</p> 
    <p>Hey, I'm Airos Chou.</p>
    <p>I am a freelance web designer &amp; graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
    <p>I'm in love with web standards xhtml/css.</p>
    <p>If you have any questions or would like a quote, please don't hesitate to drop me a line.</p>
    
    <h4>Sunflowa Media</h4>
    <p>Sunflowa Media - Green,Reliable,Funny Web Design.</p> 
    <p>Hey, I'm Airos Chou.</p>
    <p>I am a freelance web designer &amp; graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
    <p>I'm in love with web standards xhtml/css.</p>
    <p>If you have any questions or would like a quote, please don't hesitate to drop me a line.</p>	
</div>

Step2. 创建CSS

ul.side_nav {
     width: 200px;
	 float: left;
	 margin: 0;
	 padding: 0;
}
ul.side_nav li {
	 position: relative; /*--Add a relative positioning--*/
	 float: left;
	 margin: 0;
	 padding: 0;
	 display: inline;
}
ul.side_nav li a {
     width: 165px;
	 border-top: 1px solid #3373a9;
	 border-bottom: 1px solid #003867;
	 padding: 10px 10px 10px 25px;
	 display: block;
	 color: #fff;
	 text-decoration: none;
	 background: #005094 url(../images/sidenav_arrow.gif) no-repeat 5px 10px;
	 position: relative;
	 z-index: 2;
}
ul.side_nav li a:hover {
	 background-color: #2d353f;
}
ul.side_nav li div {
	 display: none;
	 position: absolute;
	 top: 2px;
	 left: 0;
	 width: 225px;
	 background: url(../images/bubble_top.gif) no-repeat right top;
}
ul.side_nav li div p {
	 margin: 7px 0;
	 line-height: 1.3em;
	 padding: 0 5px 10px 30px;
	 color: #444;
	 background: url(../images/bubble_btm.gif) no-repeat right bottom;
}
.content_txt {
     width: 480px;
     border-left: 1px dashed #2d353f;
	 color: #EEE;
	 float: left;
	 margin-left: 20px;
	 padding: 0 0 0 20px;
	 display: inline;
}
.content_txt h4 {
     font-size: 140%;
	 padding-bottom: 10px;
}
.content_txt p {
     font-size: 90%;
	 padding: 0 0 5px 0;
	 line-height: 130%;
}

Step3. 插入jQuery和脚本包

$(document).ready(function(){
		
	$("ul.side_nav li").hover(function() {
		$(this).find("div").stop()
		.animate({left: "210", opacity:1}, "fast")
		.css("display","block")

	}, function() {
		$(this).find("div").stop()
		.animate({left: "0", opacity: 0}, "fast")
	});
	
});
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
目前还没有评论



TOP