How to incorporate links inside a hamburger menu?

℡╲_俬逩灬. 提交于 2021-02-17 05:26:06

问题


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 but then, I would like the other linked pages to fall inside the hamburger menu, only visible when clicking the menu...

I would like the following to be inside the hamburger menu:

About Contact Portfolio ,etc.

Any suggestions on how to achieve this?

    * {
        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;
    }
    
    
    
    
    ul li a:hover {
        color: rgb(255, 255, 255);
    }
<header>
<div class="header-logo">
<a href="index.html"> <img src="img/Milestonehackers.jpg" alt="Milestonehackers logo"></a>
</div>
            <nav>
                <ul> <li><a href="index.html">Home</a></li></ul>
            <ul>
              <a href="#" class="nav">
                    <div class="one"></div>
                    <div class="two"></div>
                    <div class="three"></div>        
             
                <li><a href="podcasts.html">Podcast</a></li>
                <li><a href="newsletter.html">Newsletter</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
    
                <div class="sub">
                <li><a href="subscribe.html">Subscribe</a></li>
                </div>
                </a>  
            </ul> 
            </nav>
        </header>
    

回答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);
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/javascript" src = "script.js">
 
</head>
<header>
        <div class="header-logo">
        <a href="index.html"> <img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo"></a>
        </div>
        <nav>
            <ul> <li><a href="index.html">Home</a></li></ul>
        <ul>
          <a href="#" class="nav">
                <div class="one"></div>
                <div class="two"></div>
                <div class="three"></div>        
<div id = "hamburger">

            <li><a href="podcasts.html">Podcast</a></li>
            <li><a href="newsletter.html">Newsletter</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>

</div>
            <div class="sub">
            <li><a href="subscribe.html">Subscribe</a></li>
            </div>
            </a>  
        </ul> 
        </nav>
    </header>

Edit: I added the src to the new script.js file which should contain your click function:)




回答2:


Don't think you could achieve what you want only using CSS, maybe with a lot of CSS "hacks". I'd suggest adding some javascript to show on click.

I'd recommend checking this page https://www.w3schools.com/howto/howto_js_mobile_navbar.asp since they have an example just like the one you trying to achieve.



来源:https://stackoverflow.com/questions/58778820/how-to-incorporate-links-inside-a-hamburger-menu

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!