jqueryはrenderings_jqueryを使用して2レベルのナビゲーションメニューを実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:56 PM

jquery ナビゲーションメニュー

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

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

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

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

两级导航菜单的示例

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.

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。