2つのシンプルなメニューナビゲーションバーの例

メニューバーの例 1:

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<ヘッド>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script</a> type="text/javascript">
$(関数() {
$("#container .menu1 ul li").click(function() {
var index = $("#container .menu1 ul li").index(this);
$(this).addClass("bg").siblings().removeClass();
$("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide();
})
})
</script><style type="text/css">
体
{
マージン: 0;
パディング: 0;
フォントファミリー: "宋体";
フォントサイズ: 9pt;
色: #FFFFFF;
フォントの太さ: 太字;
}
＃容器
{
幅: 100%; /* 1200px; */
高さ: 自動;
マージン: 0 自動;
/* 境界線: 1px #1025c0 実線; */
/* xugang 2011.10.19 */
/* マージン: 0; */
パディング: 0px;
フォントファミリー: "宋体";
フォントサイズ: 9pt;
色: #FFFFFF;
フォントの太さ: 太字;
}
#コンテナ.menu1
{
幅: 684ピクセル;
高さ: 34px;
境界線: なし;
背景: url(/images/cnblogs_com/xugang/sadasd_09.png) 繰り返しなし;
/*背景: url(<a href="http://www.webdm.cn/images/20101213/2/menu1.gif">http://www.webdm.cn/images/20101213/2/menu1.gif</a>) 繰り返しなし;
背景色: #1B5582;*/
}
#コンテナ .menu1 ul
{
マージン: 0;
/* パディング: 0; */
左パディング: 0px;
右パディング: 0px;
パディング下部: 0px;
パディング上部: 4px;
位置: 相対的;
margin-left: 4px; /* xugang 第一レベルメニュー選択項目スタイル*/
}
#コンテナ .menu1 ul li
{ /*境界線: 1px #1025c0 solid; テスト*/
フロート: 左;
高さ: 25px;
幅: 110ピクセル;
行の高さ: 25px;
リストスタイル: なし;
テキスト配置: 中央;
カーソル: ポインタ;
/* 色: #fffff; */
padding-left: 2px; /* xugang 第一レベルのメニュー選択項目 */
/* margin-left: 1px; xugang 第一レベルのメニュー選択項目は、第一レベルのメニューを動的に右に移動させることが簡単にできます*/
}
#コンテナ.menu2
{
幅: 100%; /* 1000px; */
高さ: 25px;
境界線: なし;
色: #000000;
フォントの太さ: 標準;
background-color: #C9DEFA; /* #DFF0FF サブメニューの色*/
padding-left: 0px; /* 余白 */
padding-top: 0px; /* xugang */
margin-left: 0px; /* 余白 */
}
#コンテナ .menu2 ul
{
margin: 0; /* xugang オリジナル margin: 0; */
パディング: 0;
}
#コンテナ .menu2 ul li
{
高さ: 30px;
行の高さ: 30px;
リストスタイル: なし;
フロート: 左;
カーソル: ポインタ;
}
#コンテナ .menu2 ul li ul li
{ /* 境界線: 1px #1025c0 solid; テスト*/
フロート: 左;
パディング上部: 0px;
パディング下部: 0px;
左パディング: 40px;
パディング右: 30px; /* xugang */
高さ: 25px;
行の高さ: 25px;
リストスタイル: なし;
}
.bg
{
フォントサイズ: 12pt;
/* フォントの太さ: 通常;*/
/* テキスト装飾: 下線、点滅 */
background-color: #1B5582; /* #1B5582 第一レベルのメニュー選択の背景*/
}
。隠れる
{
表示: なし;
}
.menu_a1{ display: block; color:#ffffff; text-decoration:none !important; }
.menu_a2{ display: block; color:#000000; text-decoration:none !important; }
</スタイル>
</head>
<本文>
<div id="コンテナ">
<div class="menu1">
<ul>
<li class="bg"><a href="#" class="menu_a1">最初の列</a></li>
<li><a href="#" class="menu_a1">2 列目</a></li>
<li><a href="#" class="menu_a1">3 列目</a></li>
<li><a href="#" class="menu_a1">4 列目</a></li>
<li><a href="#" class="menu_a1">5 列目</a></li>
<li><a href="#" class="menu_a1">第 6 列</a></li>
</ul>
</div>
<div class="menu2">
<ul>
<li>
<ul>
<li><a href="#" class="menu_a2">最初の列</a></li>
<li><a href="#" class="menu_a2">最初の列</a></li>
<li><a href="#" class="menu_a2">最初の列</a></li>
</ul>
</li>
<li>
<ul class="hide">
<li>2 列目</li><li>2 列目</li><li>2 列目</li>
</ul>
</li>
<li>
<ul class="hide">
<li>3 列目</li><li>3 列目</li><li>3 列目</li>
</ul>
</li>
<li>
<ul class="hide">
<li>4 列目</li><li>4 列目</li><li>4 列目</li>
</ul>
</li>
<li>
<ul class="hide">
<li>5 列目</li><li>5 列目</li><li>5 列目</li>
</ul>
</li>
<li>
<ul class="hide">
<li>6 列目</li><li>6 列目</li><li>6 列目</li>
</ul>
</li>
</ul>
</div>
</div>
<div スタイル="幅:400px; 高さ:300px; 背景色:赤;"></div>

</本文>
</html>

メニューバーの例 2:

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<title>イエローページ地域リスト</title>
<スタイルタイプ="text/css">
body {background:#ccc;color:#000;font: normal normal normal 12px/180% Tahoma、Arial、Helvetica、sans-serif、「宋体」;text-align:center;}
.nav {位置: 相対;背景: url(/images/cnblogs_com/xugang/nav_bg.png) 繰り返しなし 0 -36px;幅:960px;高さ:36px;}
.navinner {背景: url(/images/cnblogs_com/xugang/nav_bg.png) 繰り返しなし 100% -72px;}
.navlist {高さ: 36px;行の高さ: 36px;オーバーフロー: 非表示;マージン: 0 10px;背景: url(/images/cnblogs_com/xugang/nav_bg.png) repeat-x 0 0;}
.nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -108px;}
.nav a {display: block;width: 102px;text-align: center;font-size: 120%; text-decoration:none;}
.nav a:link、.nav a:visited {color: #fff;text-decoration:none;}
.nav a:hover、.nav a:active {color: #fff;font-weight: bold;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 50% -144px;text-decoration:none;}
</スタイル>
</head>
<本文>
<div class="nav">
<div class="navinner">
<ul class="navlist">
<li><a href="https://www.jb51.net/">https://www.jb51.net/</a>" title="ホーム">ホーム</a></li>
<li><a href="<a href="https://www.jb51.net/cat.html">https://www.jb51.net/cat.html</a>" title="カテゴリー一覧" rel="nofollow">カテゴリー一覧</a></li>
<li><a href="<a href="https://www.jb51.net/loc.html">https://www.jb51.net/loc.html</a>" title="地域リスト" rel="nofollow">地域リスト</a></li>
<li><a href="<a href="https://www.jb51.net/trade.html">https://www.jb51.net/trade.html</a>" title="需要と供給の機会" rel="nofollow">需要と供給の機会</a></li>
<li><a href="<a href="https://www.jb51.net/news.html">https://www.jb51.net/news.html</a>" title="業界ニュース" rel="nofollow">業界ニュース</a></li>
<li><a href="<a href="https://www.jb51.net/submit.html">https://www.jb51.net/submit.html</a>" title="企業を送信" rel="nofollow">企業を送信</a></li>
<li><a href="<a href="https://www.jb51.net/join.html">https://www.jb51.net/join.html</a>" title="ビジネスチャンスを公開する" rel="nofollow">ビジネスチャンスを公開する</a></li>
<li><a href="<a href="https://www.jb51.net/find.html">https://www.jb51.net/find.html</a>" title="詳細検索" rel="nofollow">詳細検索</a></li>
</ul>
</div>
</div>
</本文>
</html>

<<: CSSペイントAPIを使用して、解像度に依存しない可変背景効果を動的に作成します。

>>: 優れたグラフィックデザイナーが習得すべき7つのスキル