HTML5移动优先的菜单导航栏界面设计模板

Mobile Navigation UX，如果在桌面系统上查看本作品，请把窗口缩小到小于500px大小。

html5, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3139
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.page {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background-color: #f2f2f2;
}
.head {
    display: flex;
}
.brand {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #000000;
    color: gray;
    font-family: "PT Sans", sans-serif;
    font-size: 28px;
    text-align: center;
}
@media (min-width: 500px) {
    .brand {
        display: inline-block;
        position: relative;
        width: 150px;
    }
}
.navigation {
    position: fixed;
    bottom: 0;
    background-color: #e6e6e6;
    z-index: 99;
}
@media (max-width: 500px) {
    .navigation {
        left: 0;
        right: 0;
    }
}
@media (min-width: 500px) {
    .navigation {
        display: inline-block;
        position: relative;
        height: 50px;
        width: 100%;
    }
}
.navigation__wrapper {
    position: relative;
}
.navigation__menu-mobile {
    display: flex;
    flex-direction: row;
}
@media (min-width: 500px) {
    .navigation__menu-mobile {
        display: none;
    }
}
.navigation__menu-mobile li {
    width: 25%;
    text-align: center;
}
.navigation__menu {
    width: 100%;
    display: none;
}
@media (min-width: 500px) {
    .navigation__menu {
        text-align: right;
        display: block;
    }
}
.navigation__menu li {
    width: 50%;
}
@media (min-width: 500px) {
    .navigation__menu li {
        display: inline-block;
        width: auto;
    }
}
.navigation__menu--show {
    display: flex;
    flex-wrap: wrap;
}
@media (min-width: 500px) {
    .navigation__menu--show {
        display: inline-block;
    }
}
.navigation__primary-mobile {
    height: 70px;
}
@media (min-width: 500px) {
    .navigation__primary-mobile {
        display: none;
    }
}
.menu-item {
    display: block;
    position: relative;
    padding: 0 6px;
    line-height: 50px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    text-decoration: none;
    font-family: "PT Sans", sans-serif;
}
.menu-item-1 {
    color: #0d5279;
    background-color: #1791d5;
}
.menu-item-1:after {
    background-color: #1791d5;
}
.menu-item-2 {
    color: #0b496b;
    background-color: #1587c7;
}
.menu-item-2:after {
    background-color: #1587c7;
}
.menu-item-3 {
    color: #0a3f5d;
    background-color: #147eb9;
}
.menu-item-3:after {
    background-color: #147eb9;
}
.menu-item-4 {
    color: #08364f;
    background-color: #1274ac;
}
.menu-item-4:after {
    background-color: #1274ac;
}
.menu-item-5 {
    color: #072c42;
    background-color: #116b9e;
}
.menu-item-5:after {
    background-color: #116b9e;
}
.menu-item-6 {
    color: #010406;
    background-color: #0f6290;
}
.menu-item-6:after {
    background-color: #0f6290;
}
.menu-item-7 {
    color: #041a26;
    background-color: #0e5882;
}
.menu-item-7:after {
    background-color: #0e5882;
}
.menu-item-8 {
    color: #031018;
    background-color: #0c4f74;
}
.menu-item-8:after {
    background-color: #0c4f74;
}
@media (min-width: 500px) {
    .menu-item {
        height: auto;
        line-height: 50px;
        background-color: transparent;
    }
}
@media (min-width: 500px) {
    .menu-item:after {
        display: block;
        margin-top: -4px;
        content: "";
        height: 4px;
        width: 100%;
    }
}
.menu-item .menu-icon {
    font-size: 40px;
    vertical-align: middle;
}
.menu-item--tile {
    vertical-align: middle;
    line-height: 70px;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
}
.menu-item--one {
    background-color: #737373;
}
.menu-item--two {
    background-color: #595959;
}
.menu-item--three {
    background-color: #262626;
}
.menu-item--four {
    background-color: #000000;
}
@media (min-width: 500px) {
    .menu-item--hide-desktop {
        display: none;
    }
}
.content {
    padding: 0 40px;
}
h1,
p {
    font-family: "PT Sans", sans-serif;
    line-height: 2;
}
h1 {
    margin: 30px 0 30px;
    font-size: 30px;
}
p {
    margin-bottom: 10px;
}
.dummy {
    color: #1274ac;
}
body,
html {
    height: 100%;
}
.content {
    padding: 10px;
    font-family: Arial
}

HTML

<header class="head">
        <div class="brand">
            @BROOD
        </div>
        <div class="navigation">
            <nav class="navigation__wrapper">
                <ul class="navigation__menu js-menu">
                    <li>
                        <a rel="nofollow" rel="noreferrer" href="#" class="menu-item menu-item-1">
              Menu item 1
            </a>
                    </li>
                    <li>
                        <a rel="nofollow" rel="noreferrer" href="#" class="menu-item menu-item-2">
              Menu item 2
            </a>
                    </li>
                    <li>
                        <a rel="nofollow" rel="noreferrer" href="#" class="menu-item menu-item-3">
              Menu item 3
            </a>
                    </li>
                    <li>
                        <a rel="nofollow" rel="noreferrer" href="#" class="menu-item menu-item-4">
              Menu item 4
            </a>
                    </li>
                    <li>
                        <a rel="nofollow" rel="noreferrer" href="#" class="menu-item  menu-item-5 menu-item--hide-desktop">
              Menu item 5
            </a>
                    </li>
                    <li>
                        <a rel="nofollow" rel="noreferrer" href="#" class="menu-item menu-item-6 menu-item--hide-desktop">
              Menu item 6
            </a>
                    </li>
                </ul>
                <div class="navigation__primary-mobile">
                    <ul class="navigation__menu-mobile">
                        <li>
                            <a rel="nofollow" rel="noreferrer" href="#" class="menu-item menu-item--tile menu-item--one">Code</a>
                        </li>
                        <li>
                            <a rel="nofollow" rel="noreferrer" href="#" class="menu-item menu-item--tile menu-item--two">Blog</a>
                        </li>
                        <li>
                            <a rel="nofollow" rel="noreferrer" href="#" class="menu-item menu-item--tile menu-item--three">Tweet</a>
                        </li>
                        <li>
                            <a rel="nofollow" rel="noreferrer" href="#" class="menu-item menu-item--tile menu-item--four js-toggle">
                                <i class="fa fa-th-large menu-icon"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>

<main class="content">
        <h1>Mobile-first navigation experiment with a focus on UX</h1>
        <p>Designed around a nice mobile experience, with ease of access to menus when used in a single hand.</p>
        <p>Try shrinking the page down to mobile size (&lt; 500px) and tap the <i class="fa fa-th-large menu-icon"></i> icon to show the tile menu.</p>
        <p>I'm also using colour lists to style the tiles up a bit.</p>
        <p class="dummy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt nisl eget dictum ultrices. Vestibulum non ornare felis, at luctus nulla. Nam varius dolor eget risus interdum, dignissim sollicitudin leo tristique. Donec ornare accumsan eleifend.
            Maecenas eget faucibus nisl, ultrices blandit risus. Maecenas ullamcorper mi eu nisi posuere egestas. Vivamus ac fringilla lorem. Nulla ultricies varius laoreet. Praesent vel pretium magna, et blandit neque. Integer volutpat vulputate eros,
            a scelerisque velit sagittis non. Quisque venenatis neque urna, et auctor nisl laoreet iaculis. Curabitur a libero varius, maximus metus non, consectetur elit. In mollis diam velit, a ornare augue maximus ut. Nam vehicula purus quis fermentum
            ornare. Duis luctus, justo sed ullamcorper rhoncus, diam massa viverra purus, non luctus libero neque et turpis. Integer tempor porta neque, nec finibus ante.</p>
    </main>

</div>

Mobile Navigation UX，如果在桌面系统上查看本作品，请把窗口缩小到小于500px大小。

html5, template

编辑器支持Emmet

快捷键

Mobile Navigation UX，如果在桌面系统上查看本作品，请把窗口缩小到小于500px大小。

html5, template

很棒的一款HTML5可定制分类导航边栏界面模板

黑色风格HTML5移动网站完整界面设计和代码模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：