zoukankan      html  css  js  c++  java
  • 【荐】Jquery+CSS打造的泡沫弹出框式的侧边蓝色导航菜单

    代码简介:

    泡沫弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>【荐】Jquery+CSS打造的泡沫弹出框式的侧边蓝色导航菜单_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    html, body, ul, li { 
        margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	vertical-align: baseline;
        font-family: "Verdana","lucida sans",Sans-serif;
    	font-size: 12px; 
    }
    html, body { 
        min-height: 100%;
    	color: #FFFFFF;
    	background-repeat: repeat-x;
    	background-position: top;
    	background-color: #161f2a;
    }
    ul.side_nav {
          200px;
         float: left;
         margin: 0;
         padding: 0;
    }
    ul.side_nav li {
         position: relative;
         float: left;
         margin: 0;
         padding: 0;
         display: inline;
    }
    ul.side_nav li a {
          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(http://www.webdm.cn/images/20101212/1/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;
          225px;
         background: url(http://www.webdm.cn/images/20101212/1/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(http://www.webdm.cn/images/20101212/1/bubble_btm.gif) no-repeat right bottom;
    }
    </style>
    <script language="javascript" src="http://www.webdm.cn/themes/script/jquery.js"></script>
    <script language="javascript">
        $(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>
    </head>
    <body>
    预览时如果提示有错误,请刷新一下网页就没事了。<br>
    <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="#">Rss</a>
    		<div><p>News, Video and so on.</p></div>
    	</li>
    </ul>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    </body>
    </html>
    代码来自:http://www.webdm.cn/webcode/b3956382-c2e0-4807-b4fd-559c09b35678.html
    
  • 相关阅读:
    Python:给你们安排一波VIP音乐,看我是如何不充会员也能下载的
    最详细Python打包exe教程,并修改图标,30秒搞定!
    Python:20行代码爬取高质量帅哥美女视频,让你一次看个够
    【Python爬虫】招聘网站实战合集第一弹:爬取前程无忧
    Python爬虫:爬点大家都喜欢的东西,比如美女!每天保持心情愉悦!
    Python吃喝玩乐:爬取全城按摩门店,看看有没有你想去的!
    明天就是1024了,Python前来报到!爬取全网M子图片!
    周末福利!用Python爬取美团美食信息,吃货们走起来!
    Python小工具:据说这是搜索文件最快的工具!没有之一!一起感受下......
    简单实现一个流程图(箭头流程图)
  • 原文地址:https://www.cnblogs.com/webdm/p/2107155.html
Copyright © 2011-2022 走看看