html - 如何在图片上创建菜单？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 nav 的 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，请检查此

如何使用 CSS 和 HTML 制作简单的选项卡式菜单

Answer 2

我创建了一个示例。请看一看。

工作小提琴

• 主要概念是将li标签定位在ul.
• 给标签bottom: -1px以li让它们出现在ul.
• 如果你给li边界底部，那么它看起来像ul.

我希望你可以通过引用这个来创建自己的样式（但不要复制代码）。

Answer 3

你需要几个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 4

这是一个显示您想要的样式的jsFiddle 。

• LI标签向左浮动，并设置overflow: hidden;在父UL标签上以包含浮动。

• 整个标签在其下方元素的顶部UL向下移动。position: relative; margin-bottom: -1px;标签下的 1 像素边框A给人一种错觉，即标签是下面元素的一部分。border-bottom-color活动选项卡上的 设置为与内容区域的背景颜色相匹配。

• 标签被A设置为display: block;可以给它们一个min-width,text-align: center;和 verticalpadding

• 我还在标签border-radius上放了一个小A标签：-p 如果您不想要，可以将其删除。

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