html5 Up Highlights-添加不同样式的浮动导航栏

Question

我想使用浮动的 Highlights template from HTML5 up, but I want to add a navigation bar similar to the one from a different template, for example like this menu one，单击时会滚动。

我研究了 HTML、CSS 和 JSCRIPT，并尝试使用导航栏调整第一个模板，并研究了 SO 中的不同选项，但没有成功。

两个模板在html中使用不同的方法，高亮模板结构在header中使用<div class="container">，而另一个使用<body class="landing"> ,<div id="page-wrapper">。可行吗？

这是我试过的：

HTML

...
<style>
.floating-menu {
    font-family: sans-serif;
    background: transparent;
    padding: 5px; width: 130px;
    z-index: 10000;
    position: fixed;
}
.floating-menu a, .floating-menu h3 {
    font-size: 0.8em;
    display: block;
    margin: 0 0.5em;
    color: white;
}
</style>
</head>

<body>

<nav class="floating-menu">
    <div id="nav-toggle">
        <a href="#"><span></span><span></span><span></span></a>
        <div class="menu-caption">
        </div>
    </div>
    <div id="nav" class="nav-collapse collapse">
        <ul>
            <li><a href="# ">Home</a></li>
            <li><a href="#one">Who I am</a></li>
            <li><a href="#two">Stuff I do</a></li>
        </ul>
    </div>
</nav>

CSS:

/* nav */ 

#nav > ul {
    margin: 0;
    display:block
}
#nav > ul > li {
    position: relative;
    display: inline-block;
    margin-left: 0em;
}
#nav > ul > li a {
    color: #c0c0c0;
    text-decoration: none;
    border: 0;
    display: block;
    padding:0em 0em;
}
#nav > ul > li:first-child {
    margin-left: 0;
}
#nav > ul > li:hover a {
    color: #fff;
}
#nav > ul > li.current {
    font-weight: 400;
}
#nav > ul > li.present {
    font-weight: 400;
}
#nav > ul > li.present:before {
    -moz-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    width: 0.75em;
    height: 0.75em;
    content:'';
    display: block;
    position: absolute;
    bottom: -0.5em;
    left: 50%;
    margin-left: -0.375em;
    background-color: #37c0fb;
}


#nav > ul > li.present a {
    color: #fff;
}
#nav > ul > li.active a {
    color: #fff;
}
#nav > ul > li.active.present:before {
    opacity: 0;
    }


#nav {
    cursor: default;
    background-color: #333; 
    padding: 0;
    text-align: left;
}

   #nav-toggle {
    background-color: #transparent;
    cursor: pointer;
    display:block;
    }


#nav-toggle > a {
    float:left;
    color:#fff;
    padding:0px;
    width: 0px;
}
#nav-toggle > a > span {
    width:26px;
    height:2px;
    background-color:#fff;
    display:block;
}
#nav-toggle > a > span + span {
    margin-top:4px;
}

    #nav > ul {
        display:none;
    }
    #nav > ul > li {
        display: block;
    }

.menu-caption {
    display:inline-block;
    color:#fff;
    padding:10px;
}


@media screen and (max-width:767px) {
    #nav-toggle {
        display:block;
    }
    #nav > ul {
        display:none;
    }
    #nav > ul > li {
        display: block;
    }
}

JS

    $(function() {
var windowWidth = $(window).width();


$("#nav-toggle").click(function () {
    $("#nav ul").slideToggle();
    $("#nav ul").toggleClass("open");
});

      var navMain = $("#nav");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });

$(window).resize(function () {
    windowWidth = $(window).width();
    if (windowWidth < 767) {
        if ($("#nav ul").is(":hidden")) {
            $("#nav ul").css("display","block");
        }
    }
    else {
        $("#nav ul").css("display","none");
    }
});

但这有一个奇怪的行为，即在选择项目后菜单不会向后折叠...

Answer 1

为了说明，在 Spectral index.html 文件中将其添加到其他 CSS 链接下方的 <head> 部分。这应该为您提供一个良好的起点。

<style>
    #one, #two, #three, #cta, #footer, .wrapper > .inner {
        margin: 0 auto;
        width: 50%;
    }
</style>

我建议之后在实际 CSS 文件中进行这些更改。

为了提高响应能力，您可以在 CSS 文件中使用以下语法设置媒体查询，以调整 section 的宽度以在移动视图中填充页面宽度。

@media(max-width: 767px){
        #one, #two, #three, #cta, #footer, .wrapper > .inner {
            margin: 0 auto;
            width: 100%;
        }
}

html5 Up Highlights-添加不同样式的浮动导航栏

html5 Up Highlights- adding a floating navigation bar from a different style

html

css

navigationbar