使用CSS3 Flexbox和SVG图标构建的弹性导航条

Bar Navigation with Flexbox and SVG icons, 很棒的树形、枫叶、幸运草和西红柿水果SVG图标。

html5, nav, menu

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
html {
    font-size: 12px;
}
.dont-render-dawg {
    position: absolute;
    height: 0;
    width: 0;
}
.main-nav {
    background: #eee;
}
.main-nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}
.main-nav a {
    padding: 1.25rem 0.5rem;
    font-size: 1.6rem;
    max-width: 140px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    color: #333;
}
.main-nav a:hover,
.main-nav a:focus {
    background: #ccc;
    color: black;
}
.main-nav a:hover svg,
.main-nav a:focus svg {
    fill: green;
}
.main-nav a:hover span,
.main-nav a:focus span {
    color: black;
}
.main-nav span {
    display: block;
    font-size: 1rem;
    font-weight: normal;
    color: #888;
    margin: 0.25rem 0 0 0;
}
.main-nav .icon {
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 1rem;
    fill: #999;
}
.main-nav.outlines * {
    outline: 1px solid rgba(255, 0, 0, 0.5);
}
.options {
    text-align: center;
    padding: 2rem 0;
}
.options select {
    margin-right: 2rem;
}
@media (min-width: 1000px) {
    .main-nav a {
        max-width: 500px;
        font-size: 2rem;
    }
    .main-nav .icon {
        width: 25px;
        height: 25px;
    }
}

HTML

<nav role='navigation' class="main-nav" id="main-nav">
    <ul id="main-nav-list">
        <li>
            <a rel="nofollow" rel="noreferrer" href="#">
                <svg viewBox="0 0 100 100" class="icon">
                    <use xlink:href="#leaf">
                </svg>
                <div>
                    Home
                    <span>is where the heart is</span>
                </div>
            </a>
        </li>
        <li>
            <a rel="nofollow" rel="noreferrer" href="#">
                <svg viewBox="0 0 100 100" class="icon">
                    <use xlink:href="#maple-leaf">
                </svg>
                <div>
                    About
                    <span>to blow this popcicle stand</span>
                </div>
            </a>
        </li>
        <li>
            <a rel="nofollow" rel="noreferrer" href="#">
                <svg viewBox="0 0 100 100" class="icon">
                    <use xlink:href="#clover">
                </svg>
                <div>
                    Clients
                    <span>are beautiful people</span>
                </div>
            </a>
        </li>
        <li>
            <a rel="nofollow" rel="noreferrer" href="#">
                <svg viewBox="0 0 100 100" class="icon">
                    <use xlink:href="#tomato">
                </svg>
                <div>
                    Contact
                    <span>your mom she misses you</span>
                </div>
            </a>
        </li>
    </ul>
</nav>

<div class="options">
    <label for="menu-items-position">Flex Container (justify-content)</label>
    <select id="menu-items-position">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option class="space-between">space-between</option>
        <option class="space-between">space-around</option>
    </select>

<label for="menu-items">Flex Items (flex)</label>
    <select id="menu-items">
        <option value="0 1 auto">0 1 auto (default)</option>
        <option value="1 1 auto">1 1 auto</option>
    </select>

<label for="show">Show</label>
    <select id="show">
        <option value="">normal</option>
        <option value="outlines">outlines</option>
    </select>
</div>

Bar Navigation with Flexbox and SVG icons, 很棒的树形、枫叶、幸运草和西红柿水果SVG图标。

html5, nav, menu

编辑器支持Emmet

快捷键

Bar Navigation with Flexbox and SVG icons, 很棒的树形、枫叶、幸运草和西红柿水果SVG图标。

html5, nav, menu

使用BabylonJS（HTML5 WebGL）实现的刺客信条海盗网页游戏

使用Google材料化图标构建的简约风时钟

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：