如何在汉堡菜单中合并链接? [英] How to incorporate links inside a hamburger menu?

问题描述

我很难重新安排HTML/CSS代码，以便在汉堡导航菜单中移动一些链接.

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:

关于接触投资组合等

关于如何实现此目标的任何建议?

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>
    

推荐答案

您正在寻找的被称为 jquery (简化的javascript版本").为了便于说明，例如，为要切换的子元素添加一个父div.然后在您的CSS中显示此父div无.然后，您可以使用jquery来告诉您要单击的内容，然后再告诉您要切换的内容.

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>

我将src添加到了新的script.js文件中，该文件应包含您的点击功能:)

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

这篇关于如何在汉堡菜单中合并链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！