如何在圖片上創建菜單？ CSS樣式

Question

如何創建類似於圖片的菜單？

現在我有：

<div id="nav"> 
    <nav class="top-nav"> 
     <div class="shell"> 
     <a href="#" class="nav-btn">HOMEPAGE<span></span></a> 
     <span class="top-nav-shadow"></span> 
     <ul> 
      <li class="active"><span><a href="#">home</a></span></li> 
      <li><span><a href="#">services</a></span></li> 
      <li><span><a href="#">projects</a></span></li> 
      <li><span><a href="#">solutions</a></span></li> 
      <li><span><a href="#">jobs</a></span></li> 
      <li><span><a href="#">blog</a></span></li> 
      <li><span><a href="#">contacts</a></span></li> 
     </ul> 
     </div> 
    </nav> 
</div> 

而且我對DIV導航CSS：

 #nav{ 
     background-color: transparent; 
     padding: 0em 0em 0em 2em; 
     white-space: nowrap; 
     list-style: none outside none; 
     margin: 0px; 
     height: auto; 
     line-height: normal; 
    } 

如何風格呢？我是新手

Answer 1

從你的照片，我認爲你正在尋找一種方法，使Tabs不是菜單..

你可以使用我認爲最好的事情是jQuery Tabs

從這個鏈接，您可以檢查如何使用簡單的HTML和jQueryUI CSS。

如果您希望只使用CSS和HTML查收這個

How to make a simple tabbed menu with CSS and HTML

Answer 2

你需要一些JS來做到這一點。

這裏是一個不需要任何框架，以及適合您的需要（使用jQuery）的例子：

$('#tab-nav > li').click(function(e) { 
 
    // get new active pane id 
 
    var idPane = $(this).find('a:first').attr('href').substring(1); 
 
    // change active nav 
 
    $('#tab-nav > li').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    // change active pane 
 
    $('.tab-pane').removeClass('active'); 
 
    $('#'+idPane).addClass('active'); 
 
});

.clear { display: block; clear: both; height: 0px; } 
 

 
#container { 
 
    position: relative; 
 
    color: #497188; 
 
} 
 
#tab-nav { 
 
    position: relative; 
 
    z-index: 20; 
 
} 
 
#tab-nav > li { 
 
    display: block; 
 
    border: 1px solid #497188; 
 
    border-bottom: 1px solid #497188; 
 
    padding: 1px 3px; 
 
    margin: 0 2px -1px; 
 
    float: left; 
 
} 
 
#tab-nav > li a { 
 
    color: #497188; 
 
    text-decoration: none; 
 
} 
 
#tab-nav > li.active, 
 
#tab-content { 
 
    background: #DEE7EC; 
 
    border-bottom: 1px solid #DEE7EC; 
 
} 
 
#tab-content { 
 
    position: relative; 
 
    clear: both; 
 
    border: 1px solid #497188; 
 
    z-index: 10; 
 
} 
 
.tab-pane { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 3px; 
 
} 
 
.tab-pane.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <ul id="tab-nav"> 
 
     <li class="active"><span><a href="#home">home</a></span></li> 
 
     <li><span><a href="#services">services</a></span></li> 
 
     <li><span><a href="#projects">projects</a></span></li> 
 
     <li><span><a href="#solutions">solutions</a></span></li> 
 
     <li><span><a href="#jobs">jobs</a></span></li> 
 
     <li><span><a href="#blog">blog</a></span></li> 
 
     <li><span><a href="#contacts">contacts</a></span></li> 
 
    </ul> 
 
    <div id="tab-content"> 
 
     <div id="home" class="tab-pane active">home</div> 
 
     <div id="services" class="tab-pane">services</div> 
 
     <div id="projects" class="tab-pane">projects</div> 
 
     <div id="solutions" class="tab-pane">solutions</div> 
 
     <div id="jobs" class="tab-pane">jobs</div> 
 
     <div id="blog" class="tab-pane">blog</div> 
 
     <div id="contacts" class="tab-pane">contacts</div> 
 
     <p class="clear">&nbsp;</p> 
 
    </div> 
 
</div>

Answer 3

我創建了一個例子。 請看看它。

Working Fiddle

• 的主要概念，這是定位在ul的li標籤。
• 給bottom: -1px添加li標籤讓他們來到ul的邊界。
• 如果你給li border-bottom，那麼它看起來像是ul的邊框。

我希望你可以通過引用這個（但不復制代碼）來創建自己的樣式。

Answer 4

這是jsFiddle顯示您想要的樣式。

• 的LI標籤向左浮動，並且overflow: hidden;設置父UL標籤contain the floats。

• 整個UL標記向下移動到position: relative; margin-bottom: -1px;以下的元素的頂部。 A標籤下的1像素邊框給人錯覺標籤是下面元素的一部分。活動選項卡上的border-bottom-color設置爲與內容區域的背景顏色相匹配。

• 的A標籤被設置爲display: block;，使他們能夠得到一個min-width，text-align: center;和垂直padding

• 我也提上了A標籤小border-radius的天賦:-P這如果被刪除你不想要它。

我假設類.active將由您的服務器上運行的代碼進行更改。如果沒有，上面幾個答案中列出的JS將在單擊標籤時改變該類。有些答案只會改變選項卡上的類（這實際上並不是你想要的），因此請查看這些庫（但是，因爲大多數JS選項卡庫需要特定的HTML結構，所以需要相應地修改CSS ）。如果您需要更多詳細信息，請在下面留言。