2つのナビゲーションメニューの練習
6446 ワード
入社して間もないのに、新人の仕事も多くない.今日は暇な时間で2つの異なるスタイルのナビゲーションメニューを書いて、1つは縦で、1つは横で、話は多く言わないで直接コードを与えて、もしcssあるいはjqueryが役に立つ不十分なところがあれば、貼った園友たちを見て指摘して、共に進歩します.
垂直ナビゲーションメニュー:
CSSは以下の通りである.css
HTMLは以下の通りです.
効果はまあまあですが、この例のスタイルはsitepoint、cssエッセンス(第3版)の一例から来ています.それに加えて、サブメニューのドロップダウンにjqueryを追加して効果を収めました.
//-------------------------------------------------------------------
ナビゲーションメニュー
CSSは以下の通り.css
HTMLは以下の通りです.
ここで質問なのは、ナビゲーションメニューのサブメニューの展開と縮小について、マウスをトップメニューに移動し、サブメニューを展開し、マウスがサブメニューに入って離れると、サブメニューが正常に収縮するということです.しかし、トップメニューを引いただけで、サブメニューが展開されて縮まないので、長い間考えていましたが、良い解決策が思いつかなかったので、友达がどうすればいいか知っていたら、返事をして教えてくれて、みんなに勉強させてください.
ナビゲーションメニューコードをダウンロード
垂直ナビゲーションメニュー:
CSSは以下の通りである.css
#navigation {
width:200px;
}
#navigation ul {
list-style:none;
margin:0;
padding:0;
}
#navigation li {
border-bottom:1px solid #ed9f9f;
}
#navigation li a:link, #navigation li a:visited {
font-size:90%;
display:block;
padding:0.4em 0 0.4em 0.5em;
border-left:12px solid #711515;
border-right:1px solid #711515;
background-color:#b51032;
color:#ffffff;
text-decoration:none;
}
#navigation li a:hover {
background-color:#711515;
color:#ffffff;
}
#navigation ul ul {
margin-left:12px;
}
#navigation ul ul li {
border-bottom:1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color:#ed9f9f;
color:#711515;
}
#navigation ul ul a:hover {
background-color:#711515;
color:#fff;
}
HTMLは以下の通りです.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/navigation.css" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script>
<script type="text/javascript">
$(function() {
var $submenus = $('.submenu');
$submenus.hide();
$submenus.prev().click(function() {
$submenus.slideUp('fast');
$mymenu = $(this).next();
if($mymenu.is(':hidden')) {
$mymenu.slideDown('fast');
} else {
$mymenu.slideUp('fast');
}
});
});
</script>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul class="submenu">
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul class="submenu">
<li><a href="#">Andrew</a></li>
<li><a href="#">Bruce</a></li>
<li><a href="#">Simpzon</a></li>
</ul>
</li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
効果はまあまあですが、この例のスタイルはsitepoint、cssエッセンス(第3版)の一例から来ています.それに加えて、サブメニューのドロップダウンにjqueryを追加して効果を収めました.
//-------------------------------------------------------------------
ナビゲーションメニュー
CSSは以下の通り.css
body {
padding:1em;
font-family:"Times New Roman", Times, serif;
}
#navigation {
font-size:90%;
}
#navigation ul {
list-style:none;
margin:0;
padding:0;
padding-top:1em;
}
#navigation li {
float:left;
}
#navigation .submenu {
border-top:1px solid #ffffff;
padding-top:0;
}
#navigation .submenu li {
float:none;
border-bottom:1px solid #fff;
border-right:0px;
}
#navigation a {
display:block;
padding:0.4em 1em 0.4em 1em;
font-weight:bold;
text-decoration:none;
color:#ffffff;
width:7em;
border-right:2px solid #dafce0;
}
#navigation .submenu a {
border-left:10px solid #d3de4e;;
width:6em;
}
#navigation a:link, #navigation a:visited {
background-color:#388d29;;
}
#navigation a:hover {
color:#388d29;
background-color:#c0e296;
text-decoration:underline;
}
HTMLは以下の通りです.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/horizontalNav.css" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script>
<script type="text/javascript">
$(function() {
$('.submenu').hide();
$('.submenu').prev().mouseenter(function() {
var $submenu = $(this).next();
$submenu.slideDown('normal').mouseleave(function(){
$(this).slideUp('normal');
});
});
});
</script>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul class='submenu'>
<li><a href="#">China Style</a></li>
<li><a href="#">US Style</a></li>
<li><a href="#">Japan Style</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a>
<ul class='submenu'>
<li><a href="#">Amazon</a></li>
<li><a href="#">SitePoint</a></li>
<li><a href="#">Apress</a></li>
<li><a href="#">O'relly</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
ここで質問なのは、ナビゲーションメニューのサブメニューの展開と縮小について、マウスをトップメニューに移動し、サブメニューを展開し、マウスがサブメニューに入って離れると、サブメニューが正常に収縮するということです.しかし、トップメニューを引いただけで、サブメニューが展開されて縮まないので、長い間考えていましたが、良い解決策が思いつかなかったので、友达がどうすればいいか知っていたら、返事をして教えてくれて、みんなに勉強させてください.
ナビゲーションメニューコードをダウンロード