Rumah > Artikel > hujung hadapan web > jQuery melaksanakan menu navigasi sisi gaya kotak pop timbul belon effect_jquery

jQuery melaksanakan menu navigasi sisi gaya kotak pop timbul belon effect_jquery

WBOYasal: 2016-05-16 15:38:281493semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jQuery bagi kesan menu navigasi sisi gaya kotak pop timbul belon. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu navigasi sisi pop timbul berdasarkan jQuery Apabila melihat kesan, ralat akan digesa di sudut kiri bawah, dan kesannya tidak dapat dilihat sudah tentu, dalam penggunaan sebenar, masalah ini tidak akan berlaku.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

<!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>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JS CSS merealisasikan kesan pintu gelangsar dengan kemahiran guidance_javascript segitiga kecilArtikel seterusnya：JS CSS merealisasikan kesan pintu gelangsar dengan kemahiran guidance_javascript segitiga kecil

Artikel berkaitan

Lihat lagi