html - css3中的导航栏菜单

Question

这就是我想要做的：

示例代码：

  #mainnav-menu {
            float: left;
            width: 101%;
            list-style-type: none;
            list-style-position: outside;
            position: relative;
            background-color: #389c0c;
            -webkit-box-shadow: 0 10px 8px -6px black;
               -moz-box-shadow: 0 10px 8px -6px black;
                    box-shadow: 0 10px 8px -6px black;
        }
        #mainnav-menu li {
            float:left;
            position:relative;
            margin-right: 1px;
        }
        #mainnav-menu a {
            display: block;
            padding: 0.8em 1.2em;
            text-decoration: none;
            font-size: 1.1em;
            font-family: 'Carme', Tahoma, Verdana, Arial;
            color: #bde8a9;
            -webkit-transition: all 0.1s ease-out;
            -moz-transition: all 0.1s ease-out;
            -ms-transition: all 0.1s ease-out;
            -o-transition: all 0.1s ease-out;
            transition: all 0.1s ease-out;  
        }
        #mainnav-menu a:link, #mainnav-menu a:visited{
            color: #bde8a9;
            text-decoration: none;
        }
        #mainnav-menu a:hover {
            color: #64c937;
            background: #0088ff; 
        }
        #mainnav-menu ul {
            position: absolute;
            display: none;
            z-index: 99;
            background: #0088ff;
        }
        #mainnav-menu ul li{
            margin: 0;
        }
        #mainnav-menu ul a {
            width: 250px;
            width: 16rem;
            padding: 0.7em 1.3em;
            float: left;
            font-weight: normal;
            color: #fff;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #mainnav-menu ul a:link, #mainnav-menu ul a:visited{
            color: #fff;
            font-size: 1.0em;
            text-decoration: none;
        }

        #mainnav-menu li ul ul {
            margin-left: 250px;
            margin-left: 16rem;
        }

        #wrapper {
            max-width: 1000px;
            width: 92%;
            margin: 0 auto 5em;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background: #00F;
            -moz-box-shadow: 0 0 10px #888;
            -webkit-box-shadow: 0 0 10px#888;
            box-shadow: 0 0 10px #888; 
        }

HTML：

    <header id="header" class="container clearfix" role="banner">

    <div id="logo">

    </div>
</header>

<h3 id="mainnav-icon">Menu</h3><nav id="mainnav" class="container clearfix" role="navigation">
    <ul id="mainnav-menu" class="menu"><li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-62"><a href="#">Home</a></li>
            <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="#">About</a></li>
            <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="#">Contact</a></li>

        </ul>   </nav>


     </div>

jsfiddle：在这里

我的问题是，我无法使导航栏的左侧扩展。有任何想法吗？我很乐意欣赏。谢谢。

笔记：

我不想使用任何额外的图像，我只想在纯 css 中做到这一点。

score 5 · Accepted Answer

您可以使用:after和:before伪元素选择器来做到这一点。

CSS

#mainnav{
    overflow: hidden;
    position: relative;
}
#mainnav:before{
    content: "";
    position: absolute;
    right: -25px;
    bottom: -3px;
    width: 0px;
    height: 0px;
    border-color: transparent transparent transparent green;
    border-style: solid;
    border-width: 20px;    
}
#mainnav:after{
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    left: -20px;
    bottom: -4px;
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 20px;
    z-index: 1;
}

工作小提琴

score 1 · Accepted Answer

在我看来，你想制作一个 css3 功能区。您可以使用本指南：http ://www.andreapinchi.it/css3-ribbon/

score 0 · Accepted Answer

你的意思是这样的吗？（将其应用于您的小提琴）：

#mainnav-menu {
    list-style-type: none;
    background-color: #389c0c;
    -webkit-box-shadow: 0 10px 8px -6px black;
    -moz-box-shadow: 0 10px 8px -6px black;
    box-shadow: 0 10px 8px -6px black;
}
#mainnav-menu li {
    display: inline;
    margin-right: 1px;
}
#mainnav-menu a {
    padding: 0 1.2em;
    text-decoration: none;
    font-size: 1.1em;
    font-family:'Carme', Tahoma, Verdana, Arial;
    color: #bde8a9;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
#mainnav-menu a:link, #mainnav-menu a:visited {
    color: #bde8a9;
    text-decoration: none;
}
#mainnav-menu a:hover {
    color: #64c937;
    background: #0088ff;
}
#mainnav-menu ul {
    position: absolute;
    display: none;
    z-index: 99;
    background: #0088ff;
}
#mainnav-menu ul a {
    width: 250px;
    width: 16rem;
    padding: 0.7em 1.3em;
    float: left;
    font-weight: normal;
    color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#mainnav-menu ul a:link, #mainnav-menu ul a:visited {
    color: #fff;
    font-size: 1.0em;
    text-decoration: none;
}
#wrapper {
    width: 92%;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #00F;
    -moz-box-shadow: 0 0 10px #888;
    -webkit-box-shadow: 0 0 10px#888;
    box-shadow: 0 0 10px #888;
}

score -1 · Accepted Answer

答案在这里

http://jsfiddle.net/whws8/5/

如果你想创建图像你需要像这样使用 CSS

#clip
{
position: absolute;
top: 23px;
left:-5px;
display: inline-block;
border-bottom: 7px solid rgba(0, 0, 0, 0);
border-right: 12px solid #1F1FC1;
border-left: 7px solid rgba(0, 0, 0, 0);
content: '';}

html - css3中的导航栏菜单

4 回答 4

CSS

Related

Reference