一款灰白色调简约风移动应用页面模板

带搜索条和汉堡菜单。

app, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

// search box

$(".searchclose").hide();
    $(".searchbox").hide();
    $(".search").click(function() {
        $(".searchbox").slideToggle("slow", function() {
            $(".search").hide();
            $(".searchclose").show();
        });
    });

$(".searchclose").click(function() {
        $(".searchbox").slideToggle("slow", function() {
            $(".searchclose").hide();
            $(".search").show();
        });
    });

// open hamburger

$(".close").hide();
    $(".menu").hide();
    $(".hamburger").click(function() {
        $(".menu").slideToggle("slow", function() {
            $(".hamburger").hide();
            $(".close").show();
        });
    });

// closing - when list item is clicked

$(".option").click(function() {
        $(".menu").slideToggle("slow", function() {
            $(".close").hide();
            $(".hamburger").show();
        });
    });

// close hamburger

$(".close").click(function() {
        $(".menu").slideToggle("slow", function() {
            $(".close").hide();
            $(".hamburger").show();
        });
    });

// back to top scroll

$('.top').click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, "slow");
    });

});

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300|Varela+Round);
body {
    background-color: #e2e2e2;
    color: #222;
    font-family: 'Roboto Slab', sans-serif;
    font-size: 1em;
    /* 16px */
    
    line-height: 1.5;
    margin: 0;
}
svg {
    display: block;
}
/* objects
		-------------------------------- */

.wrapper {
    margin: 80px auto;
    width: 80%;
}
.container {
    background-color: #fff;
    height: 600px;
    margin: 0 auto;
    width: 320px;
}
header {
    background-color: #222;
    overflow: hidden;
    margin: 0 auto;
    padding: 15px 10px;
    ;
    width: 300px;
}
/* search + logo + burgerbox
		-------------------------------- */

h1.logo,
.burgerbox,
.search,
.searchclose {
    height: 30px;
    cursor: pointer;
    width: 30px;
}
h1.logo {
    color: #fff;
    float: left;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin: 0 35px;
    text-align: center;
    width: 160px;
}
.burgerbox {
    float: right;
}
.search {
    float: left;
}
svg:hover path.search {
    fill: #ccc;
}
input {
    cursor: pointer;
}
input[type="text"] {
    background-color: #eaeaea;
    border: none;
    float: left;
    height: 20px;
    padding: 10px 0 10px 10px;
    width: 250px;
}
input:focus {
    border: none;
    outline: none;
}
input[type="button"] {
    background-color: #222;
    background-image: url(assets/img/searcharrow.svg);
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    color: #fff;
    float: right;
    height: 40px;
    width: 40px;
}
input[type="button"]:hover {
    background-color: #666;
}
/* svg hover effects
		-------------------------------- */

svg:hover line.grey {
    stroke: #ccc;
}
svg:hover polyline.grey {
    stroke: #ccc;
}
.searchclose {
    float: left;
}
/* hamburger navigation
		-------------------------------- */

.hamburger .close {
    position: absolute;
    z-index: 100;
}
.menu {
    background-color: #eaeaea;
    height: 540px;
    position: fixed;
    width: 320px;
}
.menu ul {
    padding: 0;
}
.menu li {
    border-bottom: 1px solid #ccc;
    font-size: 0.88em;
    list-style-type: none;
    padding: 10px;
}
.menu li.option:hover,
.contact__one:hover,
.contact__two:hover {
    background-color: #222;
    color: #fff;
}
.dropdown li:hover {
    background-color: none;
}
li.contact {
    border: 0;
    padding: 0;
}
.contact__one,
.contact__two {
    background-color: #999;
    cursor: pointer;
    display: block;
    padding: 10px 0;
    text-align: center;
    width: 150px;
}
/* links
		-------------------------------- */

a:link {
    text-decoration: none;
}
a:visited {
    color: #222;
    text-decoration: none;
}
a.cta {
    background-color: rgba(34, 34, 34, 0.4);
    border: 1px solid #fff;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.1em;
    margin-top: 130px;
    padding: 9px 32px 10px 32px;
}
a.cta:hover {
    background-color: rgba(34, 34, 34, 0.7);
    padding-right: 40px;
    padding-left: 40px;
}
/* search box
		-------------------------------- */

.searchbox {
    background-color: #fff;
    height: 40px;
    padding: 10px;
    width: 300px;
}
/* hero
		-------------------------------- */

.hero {
    background-color: #666;
    background-image: url('http://allybaird.com/codePen/img/ny-hero.jpg');
    background-repeat: no-repeat;
    height: 180px;
    padding: 30px 10px;
    text-align: center;
    width: 300px;
}
/* main
		-------------------------------- */

.main {
    margin: 30px auto;
    width: 300px;
}
.main a {
    color: inherit;
    text-decoration: underline;
}
.main a:hover {
    color: #999;
    text-decoration: none;
}
.border-bottom {
    border-bottom: none !important;
}

HTML

<form class="searchbox" name="search">
            <input type="text" placeholder="What are you looking for?" required>
            <input type="button" value="Go">
        </form>

</nav>

</header>

<nav role="navigation" class="menu">

<ul>
                <a href="" title="">
                    <li class="option">Option One</li>
                </a>
                <a href="" title="">
                    <li class="option">Option Two</li>
                </a>
                <a href="" title="">
                    <li class="option">Option Three</li>
                </a>
                <a href="" title="">
                    <li class="option">Option Four</li>
                </a>
                <a href="" title="">
                    <li class="option border-bottom" style="margin-bottom: 40px;">Option Five</li>
                </a>
                <li class="contact" style="overflow: hidden;">

<a href="" title="">
                        <div class="contact__one" style="float: left;">
                            Contact 1
                        </div>
                    </a>

<div class="contact__two" style="float: right;">
                        Contact 2
                    </div>

</li>
                </a>
            </ul>

</nav>

<section class="hero">
            <a class="cta" href="">Action</a>
        </section>

Quickly put this together as an idea for a mobile nav and search combo, view the code <a href="https://codepen.io/AllyBaird/full/wMGZyx/" target="_blank">here</a>.

</article>

</div>
    
</div>

带搜索条和汉堡菜单。

app, template

编辑器支持Emmet

快捷键

带搜索条和汉堡菜单。

app, template

使用纯CSS实现一款很棒的材料化设计日历（日程安排 | 计划管理）移动应用页面模板

用于事件管理的一款H5移动网页应用模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：