如何在图片上创建菜单？ 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

你需要几个j来做。

这是一个不需要任何框架的示例，并且符合您的需求（使用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

• 这是将li标记放在ul上的主要概念。
• bottom: -1px li个ul代码，让他们来到li的边界。
• 如果您提供ul border-bottom，则它看起来像{{1}}的边框。

我希望您可以通过引用它来创建自己的样式（但不能复制代码）。

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

  提供标记

• 我还在border-radius标签上添加了一个小A以获得天赋:-p如果您不想要它，可以将其删除。

我假设您的服务器上运行的代码会更改类.active。如果没有，上面几个答案中列出的JS将在单击选项卡时更改类。有些答案只会更改选项卡上的类（这不是你想要的......），所以请查看库（但是，由于大多数JS选项卡库需要特定的HTML结构，因此需要相应地修改CSS） ）。如果您需要更多详细信息，请在下面留言。