How to incorporate links inside a hamburger menu?

Question

I am having a hard time on how to re-arrange my HTML/CSS code in order to move a few links inside of a hamburger nav menu.

I would like to have \'home\' always visible

Answer 1

What you are looking for is called toggle. For this you need to use javascript or jquery (a simplified javascript "version"). To easy explain this, put for example a parent div for the child elements you want to toggle. Then in your css display this parent div none. Then you use jquery to be able to tell what you want to be clickable and then later what you want to toggle.

//Script.js
$(document).ready(function(){ //Use ready to make a function available after the document is loaded
$(".nav").click(function(){
	$("#hamburger").toggle(250);
});
});

 /* Style.css */
* {
    text-decoration: none;
}

body {
    background-color: #f3f3f3;
}

header {
   background-color: #fff; 
   width: 100%;
   height: 100px;
   display: table-cell;
}

.header-logo img {
    height:100px;
    padding: 10px 0px 10px 10px;
    float: left;
}

header nav ul {
    display: block;
    margin: 0 auto;
    width: fit-content;
    padding-top: 30px;
}

header nav ul li {
    display: inline-block;
    padding: 0 5px;
}

header nav ul li a {
    font-family:'Sorts Mill Goudy', serif;
    font-size: 16px;
    color: #111;
    text-transform: uppercase;
}

.sub {
    display: none;
    background-color: rgb(70, 149, 223);
    margin-left: 5%;
    height: auto;
}

/* HAMBURGER MENU */
.nav div {
    height: 4px;
    background-color: rgb(20, 15, 15);
    margin:  5px 0;
    border-radius: 25px;
    transition: 0.3s;
}

.nav {
    width: 30;
    display: block;
    float: right;
    margin: 1em 0 0 1em;
    padding-right: 10px;
}

.one {
    width: 30px;
} 

.two {
    width: 20px;
} 

.three {
    width: 25px;
} 

.nav:hover div{
    width: 30px;
}

#hamburger{
  display:none;
}



ul li a:hover {
    color: rgb(255, 255, 255);
}

验证码

 看不清?

提交回复