html - 既存のナビゲーションメニューでサブメニューを垂直レイアウトにする

Question

css3とhtmlにメニューナビゲーション機能があります

<nav>
<ul>
<li><a href="#" >Sec1</a></li>
    <li><a href="#" >Sec2</a></li>
    <li><a href="#" class="current">Sec3</a>
    <ul class="menu">
        <li><a href="#" class="documents">Documents</a></li>
        <li><a href="#" class="messages">Messages</a></li>
        <li><a href="#" class="signout">Sign Out</a></li>
    </ul></li>
<li><a href="#" >Sec4</a></li>

</ul>
</nav>

しかし、サブメニューはどのようになりますか:

ここに画像の説明を入力

それ以外の：

ここに画像の説明を入力

--フィドル- ここにフィドルがあります

score 1 · Accepted Answer

CSSとHtmlファイルを少し変更します

Css：

nav
{
position: absolute;
list-style: none;
text-align: center;
width: 620px;
top: 43px;
right: -12px;
background: transparent;
}
nav ul li
{
float: left;
line-height: normal;
}
nav ul li a
{
font-size: 28px;
font-family: 'Yanone Kaffeesatz', arial, sans-serif;
color: black;
text-transform: capitalize;
font-weight: normal;
display: block;  /* IE6, IE7 line height fix */
padding: 15px;
background-color: transparent;
margin-top: 0px;
margin-right: 6px;
text-decoration: none;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
}
nav ul li:hover > ul
{
display: inline;
}
nav ul li a:hover
{
background-color: #43AEF2;
padding: 15px;
color: white;
-moz-border-radius: 8px;
border-radius: 8px;
}
nav ul li a.current
{
background-color: #43aef2;
color: white;
-moz-border-radius: 8px;
border-radius: 8px;
}
nav ul:not(.first) li
{
text-align: center;
display: inline-block;
cursor: pointer;
margin-right: 10px;
color: #666;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
}
nav ul:not(.first) li:last-child
{
margin-right: 0;
}
nav ul:not(.first) li:hover
{
color: #000;
}
nav ul:not(.first) li:hover:after
{
color: #bbb;
}
nav ul:not(.first) li:after
{
margin-left: 10px;
content: '';
color: #bbb;
}
nav ul:not(.first) li:last-child:after
{
content: '';
}
.content_menu
{
float: left;
width: 274px;
margin-top: -10px;
margin-bottom: 15px;
}
.content_menu ul
{
margin: 0px;
padding: 0px;
float: none;
}
.content_menu ul li
{
float: none;
padding-bottom: 16px;
}
.content_menu ul li a
{
font-size: 14px;
line-height: normal;
color: #33CC99;
text-align: left;
text-decoration: none;
padding-left: 20px;
}
.content_menu ul li a:hover
{
color: #33CC99;
}
/*  submenu  */
.menu
{
display: none;
position: absolute;
background: black;
width: 140px;
}
.menu li a
{
display: block;
padding: 0 14px 0 30px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a
{
border-left: none;
}
.menu li:last-child a
{
border-right: none;
}
.menu li:hover > a
{
color: #33CC99;
}
.menu ul
{
position: absolute;
top: 60px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul
{
    opacity: 1;
}
.menu ul li
{
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > a
{
height: auto;
}
.menu li a
{
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a
{
border: none;
}
/* Icons */
.menu a.documents
{
background: url(http://designmodo.com/demo/css3dropdownmenu/img/docs.png) no-repeat 6px center;
}
.menu a.messages
{
background: url(http://designmodo.com/demo/css3dropdownmenu/img/bubble.png) no-repeat 6px center;
}
.menu a.signout
{
background: url(http://designmodo.com/demo/css3dropdownmenu/img/arrow.png) no-repeat 6px center;
}
.menu li
{
float: none;
display: initial;
}

HTML

<nav>
<ul>
<li><a href="#" >Sec1</a></li>
    <li><a href="#" >Sec2</a></li>
    <li><a href="#" class="current">Sec3</a>
    <ul class="menu">
        <li><a href="#" class="documents">Documents</a></li>
        <li><a href="#" class="messages">Messages</a></li>
        <li><a href="#" class="signout">Sign Out</a></li>
    </ul></li>
<li><a href="contacto.html" >Sec4</a></li>

</ul>
</nav>

score 1 · Accepted Answer

私はあなたが探しているものを理解しており、私の jsfiddle をできるだけあなたのものに近づけました。提供された画像を使用する代わりに、多くの画像を使用する予定がある場合に便利なアイコンフォントを使用しました。icomoon.io のKeyamoonからアイコンフォントを取得しました。これは非常に優れたツールであり、必要な他のアイコンには必ず使用する必要があります。私は Egemen Kapusuz の Icon Minia から私のものを選びました。私が使用したアイコンを見ることができます。これらのアイコンだけが必要な場合は、jsfiddleの @font-face URL からファイルをダウンロードするか、次の場所からファイルをダウンロードしてください。

@font-face {
    font-family: 'IHK';
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot');
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot?#iefix') format('embedded-opentype'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.svg#IHK') format('svg'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.woff') format('woff'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

ここからリンクをコピーするだけで、これらの 3 つのアイコンのみが必要な場合にダウンロードするフォントファイルが提供されます。背景やアイコンなどごとに 1 つの画像を読み込む代わりに、アイコンフォントを 1 つの HTTP リクエストにまとめてパッケージ化できるため、アイコンフォントは優れています。アイコンフォントは単なるフォントなので、より簡単に操作することもできます。実際のテキストフォントのように、フォントの色、アンチエイリアスを変更できます。

あなたのコードは非常にごちゃごちゃしていて少し理解しにくいように見えたので、いくつかのjQueryでコードを書き直しました.私の正確なjsfiddleを使用したい場合は、CDNからjqueryソースリンクを追加するか、独自のコピーをサーバ。jquery.comには、それに関する情報がたくさんあります。

だから私のHTMLのために：

HTML:

<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>

html には、data-icon という名前の新しい属性がいくつかあります。これらを使用して、DOM に公式の要素を追加することなく、アイコンフォントからアイコンを組み込みました。これに対するブラウザのサポートは少し新しいので、ユーザーがアイコンフォントをサポートしていない古いブラウザを使用している場合や、やなどの他の新機能を使用している場合に備えて、冗長なアイコンスキームを検討する必要がありborder-radiusますtransitions。

CSS は、非常に便利な疑似セレクターを使用するために大幅に変更されました。さらに、ナビゲーションバーが jQuery から動作するようになりました。jQuery はクロスブラウザーの JavaScript ライブラリであるため、適切にサポートされるはずです。

私が修正できなかった唯一のことは、第 2 ナビゲーションレベルでホバーされたテキストがジャンプするこの小さな問題でした。なぜそれが起こるのかわかりません。調査しますが、今のところ、これが私ができたことです。あなたのために生産します。

html - 既存のナビゲーション メニューでサブメニューを垂直レイアウトにする

2 に答える 2

Related

Reference

html - 既存のナビゲーションメニューでサブメニューを垂直レイアウトにする