2

ナビゲーション ここに画像の説明を入力してください

ホバー状態のナビゲーション

ここに画像の説明を入力してください

HTMLとCSSを使用してこのナビゲーションをどのように実装しますか？

白いボックスはロゴのプレースホルダーです。

PS：「製品」リンクはドロップダウンメニューです。

以下の私の現在の実装。（完全ではありません）

#mainNav {
  height: 60px;
  background: url(../../images/main-nav-left.png) top left no-repeat, url(../../images/main-nav-right.png) top right no-repeat, url(../../images/main-nav-repeat.png) top repeat-x;
}
#mainNav li {
  float: left;
  height: 48px;
  font-weight: bold;
  background-color: red;
  margin-top: 5px;
}
#mainNav li:not(.logo-wrapper) {
  padding: 0px 47px;
  font-size: 17px;
  text-transform: uppercase;
}
#mainNav li a {
  display: block;
  background-color: green;
  margin-top: 15px;
}
#mainNav li.logo-wrapper {
  margin-left: 15px;
}
#mainNav h1 {
  margin-top: -15px;
}
<nav class="thirteen columns" id="mainNav">
  <ul>
    <li class="logo-wrapper">
      <h1 id="logo">
    	    <%= link_to image_tag('logo.png'), root_path %>
    	  </h1>
    </li>

    <li>
      <a href="#">Products</a>
    </li>

    <li>
      <a href="#">Parts</a>
    </li>

    <li>
      <a href="#">Resources</a>
    </li>
  </ul>
</nav>

私の主な問題は、傾斜したセパレーターとナビゲーションの右端をホバー状態で機能させる方法を理解することです。

4

1 に答える 1

2

まず最初に、これらのテクノロジーの両方と、ドロップダウン部分をカバーするための jQuery について学びます。ここから始めることをお勧めします：

その質問に広く答える特定の実装に関しては、多くの労力がかかります。特定の何かを処理する方法について質問していますか? どのような HTML 構造を使用しますか? 純粋な CSS を使用して目を楽しませようとしていますか? 等。

更新: 編集していただきありがとうございます -- まもなく改訂します

于 2011-07-27T00:07:18.650 に答える