Question

我不是英语母语人士。这可能只是一个简单的错误。我是网页设计的新手。我想制作一个位于集成中心位置的下拉导航菜单。

Answer 1

<强> Demo

HTML

<div class="container landing_page">
    <div class="menu-wrapper">  
        <a href="#" class="menu-link">Menu<span class="ico-caret-down right" aria-hidden="true"></span>
        </a>
        <nav id="menu" role="navigation">
            <div class="menu">
                <ul class="menu">
                    <li>
                        <a href="#">Milk</a>
                    </li>
                    <li class="has-subnav"> 
                        <a>Egg</a>
                        <ul class="sub-menu">
                            <li>    
                                <a href="#" target="_blank">Sub Menu</a>
                            </li>
                            <li>    
                                <a href="#">Sub Menu</a>
                            </li>
                            <li>    
                                <a href="#">Sub Menu</a>
                            </li>
                        </ul>
                    </li>
                    <li>    
                        <a href="#">Cheese</a>                       
                    </li>
                    <li>    
                        <a href="#">Vegetable</a>
                    </li>
                    <li>    
                        <a href="#">Fruit</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

CSS

html {
    height:100%
}
*, :after, :before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0;
    margin:0
}
.clearfix:after {
    content:"";
    display:table;
    clear:both
}
body {
    font-family:Calibri, Lato, sans-serif;
    font-weight:300;
    font-size:15px;
    -webkit-font-smoothing:antialiased
}
a {
    text-decoration:none;
    color:#000
}
nav {
    display:block
}
.right {
    float:right;
    margin-left:1em
}
.ico-caret-down:before {
    content:"==";
    font-weight:700
}
.menu-wrapper {
    position:fixed;
    left:0;
    right:0;
    margin:auto;
    width:100%;
    z-index:9999;
    font-size:1.1em
}
.menu-wrapper .menu {
    margin:0;
    padding-left:0;
    list-style:none;
    text-align:center
}
.menu-wrapper .menu>li {
    position:relative;
    display:inline-block;
    margin:0 -2px;
    background:rgba(0, 0, 0, .4)
}
.menu-wrapper a.menu-link {
    display:none;
    padding:.7em 0;
    background:rgba(0, 0, 0, .9)
}
.menu-wrapper a {
    display:block;
    position:relative;
    padding:10px 26px;
    line-height:1.3em;
    text-decoration:none;
    color:#000;
    background:rgba(0, 0, 0, .4);
}
.menu-wrapper a:hover {
    color:#fff;
    background:rgba(0, 0, 0, .4);
    cursor:pointer
}
.menu-wrapper .sub-menu {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    position:absolute;
    max-height:0;
    overflow:hidden;
    list-style:none outside none;
    text-align:center;
    text-transform:none
}
.menu-wrapper .sub-menu li {
    display:block
}
.menu-wrapper .sub-menu a {
    margin:0;
    padding:10px 16px;
    white-space:nowrap;
    border:none
}
.menu-wrapper .sub-menu a:hover {
    background:rgba(0, 0, 0, .4)
}
.menu-wrapper li:hover .sub-menu {
    margin-left:-13px;
    background:rgba(255, 255, 255, .8);
    max-height:30em;
    transition:max-height .5s
}
@media screen and (max-width: 600px) {
    .deco {
        width: 90px;
        padding-top: 20px;
    }
    .decoImg {
        margin: auto;
        width: 90px;
    }
    .rotate {
        bottom: 10px;
        text-shadow: none;
        font-size: 1.5em;
    }
    .js .menu-wrapper nav[role=navigation] {
        overflow: hidden;
        max-height: 0em;
    }
    .js .menu-wrapper nav[role=navigation].active {
        max-height: 30em;
        transition: max-height 0.5s ease-out;
    }
    .menu-wrapper {
        /* unhide the 2nd level */
        /* styling the toggle menu */
        /* arrow to indicate that we have subnav*/
    }
    .menu-wrapper a.menu-link {
        display: block;
        width: auto;
        color: #fff;
        padding-right: 15px;
        padding-left: 10px;
        border: none;
        margin: 0;
        background:rgba(0, 0, 0, 0.6);
    }
    .menu-wrapper a.menu-link:hover {
        background:rgba(0, 0, 0, 0.4);
    }
    .menu-wrapper .menu .menu {
        padding-bottom: 5px;
    }
    .menu-wrapper .menu li {
        display: block;
        border: none;
    }
    .menu-wrapper .menu > li {
        padding: 0px;
        border-top: 1px solid #aaa;
    }
    .menu-wrapper .menu a {
        padding: 0.5em 0;
        margin: 0px;
        border: none;
    }
    .menu-wrapper .menu a:hover {
        background: rgba(0, 0, 0, 0.4);
    }
    .menu-wrapper .menu .rightalign {
        float: none;
    }
    .menu-wrapper li:hover .sub-menu {
        max-height: 0em;
        transition: none;
    }
    .menu-wrapper .sub-menu {
        background: none;
        margin-left: 0px;
        margin-top: 1px;
        display: block;
        width: 100%;
    }
    .menu-wrapper .sub-menu li, .menu-wrapper .sub-menu li a {
        margin: 0;
        display: block;
        width: 100%;
    }
    .menu-wrapper .sub-menu a {
        padding-left: 0.8em;
    }
    .menu-wrapper .menu .has-subnav {
        position: relative;
    }
    .menu-wrapper li .sub-menu.active {
        max-height: 30em;
        overflow: visible;
        position: relative;
        z-index: 9;
        transition: max-height 0.5s ease-out;
    }
    .menu-wrapper .toggle-link {
        height: 38px;
        width: 58px;
        display: block;
        position: absolute;
        right: 0px;
        z-index: 200;
        font-size: 0em;
        cursor: pointer;
        font-weight: bold;
        line-height: 1;
    }
    .menu-wrapper .toggle-link:hover {
        transition: all 0.2s;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
    }
    .menu-wrapper .menu .has-subnav > .toggle-link:after {
        content:"+";
        position: absolute;
        width: 50px;
        top: 50%;
        margin-top: -15px;
        bottom: 50%;
        right: 4px;
        font-size: 28px;
    }
    .menu-wrapper .menu .has-subnav > .toggle-link.active:after {
        content:"-";
        margin-top: -18px;
    }
}

JS

$(document).ready(function () {
    $('body').addClass('js');
    var $menu = $('#menu'),
        $menulink = $('.menu-link'),
        $menuTrigger = $('.has-subnav > a');

    $menulink.click(function (e) {
        e.preventDefault();
        $menulink.toggleClass('active');
        $menu.toggleClass('active');
    });

    var add_toggle_links = function () {
        if ($('.menu-link').is(":visible")) {
            if ($(".toggle-link").length > 0) {} else {
                $('.has-subnav > a').before('<span class="toggle-link"> Open submenu </span>');
                $('.toggle-link').click(function (e) {
                    var $this = $(this);
                    $this.toggleClass('active').siblings('ul').toggleClass('active');
                });
            }
        } else {
            $('.toggle-link').empty();
        }
    }
    add_toggle_links();
    $(window).bind("resize", add_toggle_links);

});

Answer 2

Please check this [fiddle][1].

这是你试图说的。如果是，添加空间是我知道的唯一黑客

  [1]: http://jsfiddle.net/Me5rF/

下拉菜单中css属性的100％宽度

2 个答案: