jQuery はバルーンポップアップボックススタイルのサイドナビゲーションメニューを実装します。-jsチュートリアル-php.cn

jQuery はバルーンポップアップボックススタイルのサイドナビゲーションメニューを実装します。

WBOY

リリース： 2016-05-16 15:38:28

オリジナル

1536 人が閲覧しました

この記事の例では、バルーンポップアップボックススタイルのサイドナビゲーションメニュー効果の jQuery の実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは jQuery に基づいたバルーンポップアップサイドナビゲーションメニューです。効果をプレビューすると、左下隅にエラーが表示され、更新後に効果を確認できます。もちろん、実際の使用ではこの問題は発生しません。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

http://demo.jb51.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 プログラミングに役立つことを願っています。