amazeui学習ノート--css(共通コンポーネント9)--navをナビゲート

一、まとめ

1、ナビゲーション基本使用: .am-nav classを追加した後、基本的な垂直ナビゲーションである.既定のスタイルでは、ナビゲーションの幅は限定されず、メッシュと組み合わせて使用できます.やはりul包liの形式です.

<ul class="am-nav">
  <li class="am-active"><a href="#">  a>li>
  <li><a href="#">    a>li>
  <li><a href="#">    a>li>
ul>

2、水平ナビゲーション:.am-navに.am-nav-pillsを追加し、水平ナビゲーションを形成する.<ul class="am-nav am-nav-pills"> li
3、タグ式ナビゲーション:.am-navに.am-nav-tabsを加え、タグ式のナビゲーションを形成する.アクティブなラベルは、

に.am-activeを追加します.<ul class="am-nav am-nav-tabs">
4、幅アダプティブ:.am-nav-justifyを水平ナビゲーションまたはラベルナビゲーションに追加し、

に平均的に幅を割り当てる(display: table-cellによって実現される).平均配分はmedia-up(>640 px)でのみ有効であり、<=640 pxの場合はメニューが垂直に積み重ねられます(ブラウザウィンドウの効果を縮小すると効果が表示されます).
5、ナビゲーション状態:
ナビゲーション状態classは、

に追加される.

.am-disabled-無効

.am-active-アクティブ

6、ナビゲーションタイトル及び分割線:
ナビゲーションタイトルと区切り線は現在、垂直メニューにのみ適用されています.

.am-nav-headerナビゲーションタイトルは、

に直接配置されます.

.am-nav-dividerナビゲーション分割線は、空の

に追加される.

7、プルダウンメニュー:JS Dropdownコンポーネントと組み合わせて使用する必要がある.

 1 <ul class="am-nav am-nav-pills">
 2     <li class="am-active"><a href="#">  a>li>
 3     <li><a href="#">  a>li>
 4     <li class="am-dropdown" data-am-dropdown>
 5         <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
 6                <span class="am-icon-caret-down">span>
 7         a>
 8         <ul class="am-dropdown-content">
 9             <li class="am-dropdown-header">Headerli>
10             <li><a href="#">1.     ，    a>li>
11             <li class="am-active"><a href="#">2.        a>li>
12             <li><a href="#">3.         a>li>
13             <li class="am-disabled"><a href="#">4.        a>li>
14             <li class="am-divider">li>
15             <li><a href="#">5.        a>li>
16           ul>
17     li>
18 ul>

 
 
 
 
 

二、ナビゲーションnav

Nav

目次

基本スタイル

水平ナビゲーション

タグナビゲーション

幅アダプティブ

ナビゲーション状態

ナビゲーションタイトルおよび区切り線

ドロップダウンメニュー

Tab式

スタイルコンポーネントをナビゲートし、リンクリストに.am-nav classを追加します.

基本スタイル

.am-nav classを追加すると、基本的な垂直ナビゲーションになります.既定のスタイルでは、ナビゲーションの幅は限定されず、メッシュと組み合わせて使用できます.
 Copy
トップページ

使用開始

オンデマンドカスタマイズ

<ul class="am-nav">
  <li class="am-active"><a href="#">  a>li> <li><a href="#">    a>li> <li><a href="#">    a>li> ul>

すいへいこうほう

.am-navに加えて.am-nav-pillsを追加し、水平ナビゲーションを形成する.
 Copy
トップページ

使用開始

オンデマンドカスタマイズ

<ul class="am-nav am-nav-pills">
  <li class="am-active"><a href="#">  a>li> <li><a href="#">    a>li> <li><a href="#">    a>li> ul>

タブ式ナビゲーション

.am-navに.am-nav-tabsを加え、ラベル式のナビゲーションを形成する.アクティブなラベルは、

に.am-activeを追加します.
 Copy
トップページ

使用開始

オンデマンドカスタマイズ

<ul class="am-nav am-nav-tabs">
  <li class="am-active"><a href="#">  a>li> <li><a href="#">    a>li> <li><a href="#">    a>li> ul>

幅アダプティブ

水平ナビゲーションまたはラベルナビゲーションに.am-nav-justifyを追加すると、

の平均分配幅(display: table-cellによって実現される)が得られる.
平均配分はmedia-up(>640 px)でのみ有効であり、<=640 pxの場合はメニューが垂直に積み重ねられます(ブラウザウィンドウの効果を縮小すると効果が表示されます).
 Copy
トップページ

使用開始

オンデマンドカスタマイズ

に参加
トップページ

使用開始

に参加

<ul class="am-nav am-nav-pills am-nav-justify">
  <li class="am-active"><a href="#">  a>li> <li><a href="#">    a>li> <li><a href="#">    a>li> <li><a href="#">    a>li> ul> <ul class="am-nav am-nav-tabs am-nav-justify"> <li class="am-active"><a href="#">  a>li> <li><a href="#">    a>li> <li><a href="#">    a>li> ul>

ナビゲーションステータス

ナビゲーション状態classは、

に追加される.

.am-disabled-無効

.am-active-アクティブ

 Copy
トップページ

について
無効リンク

<ul class="am-nav am-nav-pills">
  <li class="am-active"><a href="#">  a>li> <li><a href="#">    a>li> <li class="am-disabled"><a href="#">    a>li> ul>

ナビゲーションタイトルと区切り線

ナビゲーションタイトルと区切り線は現在、垂直メニューにのみ適用されています.

.am-nav-headerナビゲーションタイトルは、

に直接配置されます.

.am-nav-dividerナビゲーション分割線は、空の

に追加される.

 Copy

トップページ

の使用を開始

について

に連絡してください

応答式

移動優先

<ul class="am-nav">
  <li><a href="#">  a>li> <li class="am-nav-header">    li> <li><a href="#">    a>li> <li><a href="#">    a>li> <li class="am-nav-divider">li> <li><a href="#">   a>li> <li><a href="#">    a>li> ul>

ドロップダウンメニュー

JS Dropdownコンポーネントと組み合わせて使用する必要があります.
 Copy
トップページ

プロジェクト

メニュー

<ul class="am-nav am-nav-pills">
    <li class="am-active"><a href="#">  a>li> <li><a href="#">  a>li> <li class="am-dropdown" data-am-dropdown> <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">    <span class="am-icon-caret-down">span> a> <ul class="am-dropdown-content"> <li class="am-dropdown-header">Headerli> <li><a href="#">1.     ，    a>li> <li class="am-active"><a href="#">2.        a>li> <li><a href="#">3.         a>li> <li class="am-disabled"><a href="#">4.        a>li> <li class="am-divider">li> <li><a href="#">5.        a>li> ul> li> ul>

Tab式

 Copy
トップページ

プロジェクト

メニュー

<ul class="am-nav am-nav-tabs">
  <li class="am-active"><a href="#">  a>li> <li><a href="#">  a>li> <li class="am-dropdown" data-am-dropdown> <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">    <span class="am-icon-caret-down">span> a> <ul class="am-dropdown-content"> ... ul> li> ul>