Question

我想使用HTML5中的Highlights模板，但我想添加一个类似于不同模板的导航栏，例如像this menu one那样浮动，点击时滚动上。

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

这两个模板在其html中使用不同的方法，高亮模板结构在标题中使用<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

To illustrate, in the Spectral index.html file add this in the <head> section below the other CSS links. This should give you a good starting point to what you want.

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

I would suggest making these changes in the actual CSS file afterwards though.

For responsiveness you can setup media queries using the below syntax in your CSS file to adjust the width of the section's to fill the width of the page when in mobile view.

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

html5 Up要点 - 从不同的样式添加浮动导航栏

1 个答案: