jqueryはrenderings_jqueryを使用して2レベルのナビゲーションメニューを実装します

主に、インターフェース要件がそれほど高くない運用および保守システムに使用されます。 私のページデザイン能力は非常に低いと痛感しており、インタラクションロジックはもう少し有能であることを学ぶしかありません。

コードを直接投稿します:

1. HTML ページと JS の相互作用、Jquery ファイルの導入に注意してください

コードをコピーしますコードは次のとおりです:

两级导航菜单

两级导航菜单的示例

[ 你好: admin ]

[ 提建议 ]

首页
IT学习
百科
学术资源
更多

我的博客

并发编程网
CSDN
Infoq
伯乐在线
外刊评论

WIKI百科
知乎

ACM

虾米音乐
网易公开课

2. CSS ファイル

[css] から派生したコード部分を表示します。私のコード部分

div:not(#topnav, #logo){font-size:10pt! important}
*{font-family: Microsoft Yahei、Song、san-serif! important}

/*
* ヘッダー CSS
*/

a{color:#2F649A;}
a:link{text-decoration:none;}
a :visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:none;}

body {
背景-color: #dae7f6;
マージン: -0px -0px;

#firstHeader {
高さ:
}

#ロゴ {
float: left;
font-size: 28pt;
margin: 10px 0px 10px 20px;
font-family: 公式スクリプト、Microsoft Yahei、Song 王朝、サンセリフ


#target {
float: left;
font-size: 10.5pt;
font-weight: 1.5em; : 25px 30px 0px 5px;
}

#toolbar {
float: right;
margin: 0px
}

#toolbar a {
font-size: 10pt;
}

#content {
background-color: #45b97c;

/* トップメニュー */
#topnav {
float: left;
background-color: #426ab3;
width: 100%;
}

#topnav_list {
float:left;幅: 100%; 高さ: #333; 余白: 0px 0px -1px 0px; フォントサイズ: 太字: 5px; >}

#topnav_list a {
display:inline-block; height:24px;
color:#fff;高さ:22px; *ライン高さ:24px;
ボーダー半径: 5px; ボーダー右: 2px アウトセット

#topnav_list
表示:インラインブロック; 高さ:0 20px 0 0;
ボーダー上部の半径: 8px; -bottom-left-radius: 0px;
border-bottom-right-radius: 0px;

#topnav .topnav_list a:hover, #topnav .topnav_list a.select {
位置:相対; z-index:9;
背景色:#fff;
ボーダー上部の半径: 8px; >ボーダー右上半径: 8px;
ボーダー左下半径: 0px;
}

#topnav 。 topnav_list a:ホバー スパン、#topnav .topnav_list a.select スパン {
背景色:
カラー:#fff;
ボーダー半径: 5px; 🎜>.clear {
clear:
}

/* 最初のメニュー */
#nav {
font-size:
}

#nav .nav_list {
float:left; font-weight:bold;height:25px;

#nav_list a {
display:inline-block;
color:#fff; *line-height:24px; 🎜>border-radius: 8px;
border-radius: 8px;

#nav_list {
display:inline-block;半径: 8px;

#nav_list a:hover, #nav .nav_list a.select {
position:relative;
text-decoration:なし;
ボーダー半径: 8px;
ボーダー半径: 8px;

#nav .nav_list a:hover、#nav .nav_list a :hover スパン {
背景色: #007d65;
色: #fff;

#nav .nav_list a.select, #nav .nav_list a.select スパン {
背景色: # fff;
カラー:
}


3.