CODEWITHSUNDEEP
csshtmlnavigationbar
bla
bla

Reputation: 26069

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

I want to use the 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 that floats, and rolls when clicked on.

I've looked into the HTML,CSS and JSCRIPT and to try and adapt the first template with the navigation bar, as well as investigate different options in SO with no success.

The two templates use different approaches in their html, the highlights template structure uses <div class="container"> in the header, while the other one uses <body class="landing"> ,<div id="page-wrapper">. Is that feasible?

This is what I've tried:

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");
    }
});

But this has a strange behavior that the menu doesn't fold back after an item was selected...

Upvotes: 1

Views: 867

Answers (1)

Steven B.
Steven B.

Reputation: 9362

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%;
        }
}

Upvotes: 1

Related Questions