jQuery实现气球弹出框式的侧边导航菜单效果

前端技术 2023/09/06 JavaScript

本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现的气球弹出框式的侧边导航菜单，预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/jquery-alt-dlg-left-nav-menu-style-codes/

具体代码如下：

<!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>泡沫弹出框式的侧边导航菜单</title>
<meta http-equiv=\"content-type\" content=\"text/html;charset=gb2312\">
<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 {
  width: 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 {
  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;
}
</style>
<script language=\"javascript\" src=\"jquery-1.6.2.min.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>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/16515

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案