可折叠的导航问题

问题描述 投票:-1回答:1

我有我的可折叠的导航栏的问题。我试图让这个导航栏下面的内容将拉低,使其不重叠网页上的内容。我用尽了一切从z-index的,显示类型并没有什么似乎工作。是否有人可以帮助我吗?

<!DOCTYPE html>
<html>
<head>
    <title>Home | Physical Model </title>
    <!--Website CSS-->
    <link href="css/collapse.css" type="text/css" rel="stylesheet">
<html>
<body>
    <nav>
        <div class="nav">
            <label for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle">
            <div class="menu">
                <div class="logo"><a><i class="fa fa-cog" ></i></a></div>
                <a href="index.html">Home</a>
                <a href="#construction">Construction</a>
                <a href="#dynamics">Dynamics</a>
                <a href="#fluids">Fluids</a>
                <a href="#heattran">Heat Transfer</a>
                <a href="#matsci">Material Science</a>
                <a href="#mechanics">Mechanics</a>
                <a href="#statics">Statics</a>
                <a href="#thermodynamics">Thermodynamics</a>

                <!--Search Bar-->
                <div class="search-bar-input">
                    <form>
                        <input type="text" placeholder="Search..." name="search">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </nav>

    <content>
        <div id="showcase">
            <img id="welcome" src="img/welcome.jpg" width="1900px" height="900px">
        </div>

        <div class="content">
            <div class="categories-box-1">
                <div id="box-1" class="boxes">
                    <section id="construction">
                        <h3>Construction</h3>
                        <ul>
                            <li><a href="html_categories/construction/const-a.html">Crane Rigging Angles</a></li>
                            <li><a href="html_categories/construction/const-b.html">Excavation and Earthwork Pressure</a></li>
                        </ul>
                    </section>
                </div>
                <div id="box-2" class="boxes">
                    <section id="dynamics">
                        <h3>Dynamics</h3>
                        <ul>
                            <li><a href="html_categories/dynamics/dyn-a.html">Collision and Deformation: When Worlds Collide</a></li>
                            <li><a href="html_categories/dynamics/dyn-b.html">General Planar Motion: Armor Attack</a></li>
                            <li><a href="html_categories/dynamics/dyn-c.html">General Planar Motion: The Helicopter</a></li>
                            <li><a href="html_categories/dynamics/dyn-d.html">General Planar Motion: The Oil Rig</a></li>
                            <li><a href="html_categories/dynamics/dyn-e.html">General Planar Motion: The Slider</a></li>
                        </ul>
                    </section>
                </div>
                <div id="box-3" class="boxes">
                    <section id="fluids">
                    <h3>Fluids</h3>
                        <ul>
                            <li><a href="html_categories/fluids/flu-a.html">Fluid Properties</a></li>
                            <li><a href="html_categories/fluids/flu-b.html">Head Loss</a></li>
                            <li><a href="html_categories/fluids/flu-c.html">Hydrostatics</a></li>
                            <li><a href="html_categories/fluids/flu-d.html">Internal Flow and Losses</a></li>
                            <li><a href="html_categories/fluids/flu-e.html">Laminar and Turbulent Flow: Smoke Tunnel</a></li>
                        </ul>
                    </section>
                </div>
                <div id="box-4" class="boxes">
                    <section id="heattran">
                        <h3>Heat Transfer</h3>
                        <ul>
                            <li><a href="html_categories/heat_transfer/heat-a.html">Conservation of Energy: Ice Melting Blocks</a></li>
                            <li><a href="html_categories/heat_transfer/heat-b.html">Radiant Energy: Parabolic Concentrator</a></li>
                        </ul>
                    </section>
                </div>
            </div>

        <div class="categories-box-2">
            <div id="box-5" class="boxes">
                <section id="matsci">
                    <h3>Material Science</h3>
                    <ul>
                        <li><a href="html_categories/material_science/matsci-a.html">Deformation: Bending a Knife Blade</a></li>
                        <li><a href="html_categories/material_science/matsci-b.html">Deformation: Shape Memory Alloys</a></li>
                        <li><a href="html_categories/material_science/matsci-c.html">Primary and Secondary Creep: Creepy Plastic</a></li>
                    </ul>
                </section>
            </div>
            <div id="box-6" class="boxes">
                <section id="mechanics">
                    <h3>Mechanics</h3>
                    <ul>
                        <li><a href="html_categories/mechanics/mech-a.html">Axial Strain</a></li>
                        <li><a href="html_categories/mechanics/mech-b.html">Beam Bending: Foam Beam</a></li>
                        <li><a href="html_categories/mechanics/mech-c.html">Design of Axial Members</a></li>
                        <li><a href="html_categories/mechanics/mech-d.html">Elastic vs. Plastic</a></li>
                        <li><a href="html_categories/mechanics/mech-e.html">Load Conditions: Rubber Shapes</a></li>
                        <li><a href="html_categories/mechanics/mech-f.html">Paper Stress Concentrations</a></li>
                        <li><a href="html_categories/mechanics/mech-g.html">Shear Demonstrator</a></li>
                        <li><a href="html_categories/mechanics/mech-h.html">Stress/Strain: A Strainge Transformation</a></li>
                        <li><a href="html_categories/mechanics/mech-i.html">Stress/Strain Transformation: The Big Book of Shear</a></li>
                        <li><a href="html_categories/mechanics/mech-j.html">Thermal Expansion</a></li>
                        <li><a href="html_categories/mechanics/mech-k.html">Thin Wall Pressure Vessels - Balloons</a></li>
                        <li><a href="html_categories/mechanics/mech-l.html">Thin Wall Pressure Vessels - Hot Dogs</a></li>
                        <li><a href="html_categories/mechanics/mech-m.html">Thin Wall Pressure Vessels</a>
                        <li><a href="html_categories/mechanics/mech-n.html">Torsion: Tower of Torque</a></li>
                    </ul>
                </section>
            </div>
            <div id="box-7" class="boxes">
                <section id="statics">
                    <h3>Statics</h3>
                    <ul>
                        <li><a href="html_categories/statics/stat-a.html">Concentrated Cable Loads: The Ski Gondola</a></li>
                        <li><a href="html_categories/statics/stat-b.html">Coulomb Friction: Fun with Friction</a></li>
                        <li><a href="html_categories/statics/stat-c.html">Force Vector: Amazing Weight Loss Program</a></li>
                        <li><a href="html_categories/statics/stat-d.html">Frame Demos</a></li>
                        <li><a href="html_categories/statics/stat-e.html">Friction: Belt Friction</a></li>
                        <li><a href="html_categories/statics/stat-f.html">Loading: Distributed Student Loading</a></li>
                        <li><a href="html_categories/statics/stat-g.html">Mechanical Advantage: Pulleys - Equilibrator Challenge</a></li>
                        <li><a href="html_categories/statics/stat-h.html">Mechanical Advantage: The Torque Tester</a></li>
                        <li><a href="html_categories/statics/stat-i.html">Moments: Lug Wrench vs. Breaker Bar</a></li>
                        <li><a href="html_categories/statics/stat-j.html">Moments: Moments and Couples</a></li>
                        <li><a href="html_categories/statics/stat-k.html">Moments: The Persuader</a></li>
                        <li><a href="html_categories/statics/stat-l.html">Moments: Varignon's I-Beam</a></li>
                        <li><a href="html_categories/statics/stat-m.html">Truss Design: K'NEX Trusses</a></li>
                        <li><a href="html_categories/statics/stat-n.html">Truss Design: Ruler Truss</a></li>
                        <li><a href="html_categories/statics/stat-o.html">Truss Design: Wacky Fun Noodle</a></li>
                        <li><a href="html_categories/statics/stat-p.html">Truss Design: Wooden Truss 2D</a></li>
                        <li><a href="html_categories/statics/stat-q.html">Truss Design: Wooden Truss 3D</a></li>
                        <li><a href="html_categories/statics/stat-r.html">Uniformly Loaded Cables</a></li>
                        <li><a href="html_categories/statics/stat-s.html">Zero Force Members</a></li>
                    </ul>
                </section>
            </div>
            <section id="thermodynamics">
                <div id="box-8" class="boxes">
                    <h3>Thermodynamics</h3>
                    <ul>
                        <li><a href="html_categories/thermodynamics/therm-a.html">2nd Law - Direction</a></li>
                        <li><a href="html_categories/thermodynamics/therm-b.html">2nd Law - Losses</a></li>
                        <li><a href="html_categories/thermodynamics/therm-c.html">Boiling Point: The Hand Boiler</a></li>
                        <li><a href="html_categories/thermodynamics/therm-d.html">Boiling Properties</a></li>
                        <li><a href="html_categories/thermodynamics/therm-e.html">Closed vs. Open Systems</a></li>
                        <li><a href="html_categories/thermodynamics/therm-f.html">Conservation of Mass: Molasses Madness</a></li>
                        <li><a href="html_categories/thermodynamics/therm-g.html">Density and Buoyancy: The Lava Lamp</a></li>
                        <li><a href="html_categories/thermodynamics/therm-h.html">Otto Cycle: Engine Knock</a></li>
                        <li><a href="html_categories/thermodynamics/therm-i.html">Psychrometry</a></li>
                        <li><a href="html_categories/thermodynamics/therm-j.html">Total Energy - Fan Box</a></li>
                        <li><a href="html_categories/thermodynamics/therm-k.html">Total Energy</a></li>
                        <li><a href="html_categories/thermodynamics/therm-l.html">Vapor Power Cycle: The Little Engine That Could</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
</content>

    <footer>
        <div class="footer">
            <p>Tyler Kautz, Trevor Swann, Jacob Stambaugh. Copyright &copy; 2019. Some Rights Reserved.</p>
        </div>
    </footer>
</body>    
</html>.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <nav>
        <div class="nav">
            <label for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle">
            <div class="menu">
                <div class="logo"><a><i class="fa fa-cog" ></i></a></div>
                <a href="index.html">Home</a>
                <a href="#construction">Construction</a>
                <a href="#dynamics">Dynamics</a>
                <a href="#fluids">Fluids</a>
                <a href="#heattran">Heat Transfer</a>
                <a href="#matsci">Material Science</a>
                <a href="#mechanics">Mechanics</a>
                <a href="#statics">Statics</a>
                <a href="#thermodynamics">Thermodynamics</a>

                <!--Search Bar-->
                <div class="search-bar-input">
                    <form>
                        <input type="text" placeholder="Search..." name="search">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </nav>

    <content>
        <div id="showcase">
            <img id="welcome" src="img/welcome.jpg" width="1900px" height="900px">
        </div>

        <div class="content">
            <div class="categories-box-1">
                <div id="box-1" class="boxes">
                    <section id="construction">
                        <h3>Construction</h3>
                        <ul>
                            <li><a href="html_categories/construction/const-a.html">Crane Rigging Angles</a></li>
                            <li><a href="html_categories/construction/const-b.html">Excavation and Earthwork Pressure</a></li>
                        </ul>
                    </section>
                </div>
                <div id="box-2" class="boxes">
                    <section id="dynamics">
                        <h3>Dynamics</h3>
                        <ul>
                            <li><a href="html_categories/dynamics/dyn-a.html">Collision and Deformation: When Worlds Collide</a></li>
                            <li><a href="html_categories/dynamics/dyn-b.html">General Planar Motion: Armor Attack</a></li>
                            <li><a href="html_categories/dynamics/dyn-c.html">General Planar Motion: The Helicopter</a></li>
                            <li><a href="html_categories/dynamics/dyn-d.html">General Planar Motion: The Oil Rig</a></li>
                            <li><a href="html_categories/dynamics/dyn-e.html">General Planar Motion: The Slider</a></li>
                            <li><a href="html_categories/dynamics/dyn-f.html">General Planar Motion: The Tank</a></li>
                            <li><a href="html_categories/dynamics/dyn-g.html">Projectile Motion</a></li>
                            <li><a href="html_categories/dynamics/dyn-h.html">Rectilinear Motion</a></li>
                            <li><a href="html_categories/dynamics/dyn-i.html">Relative Motion: Choo Choo Train</a></li>
                            <li><a href="html_categories/dynamics/dyn-j.html">Rotation: No Slip Wheel</a></li>
                            <li><a href="html_categories/dynamics/dyn-k.html">Rotation and Moment of Inertia: A Day at the Races</a></li>
                            <li><a href="html_categories/dynamics/dyn-l.html">Rotational Kinematics: The Ferris Wheel</a></li>
                        </ul>
                    </section>
                </div>
                <div id="box-3" class="boxes">
                    <section id="fluids">
                    <h3>Fluids</h3>
                        <ul>
                            <li><a href="html_categories/fluids/flu-a.html">Fluid Properties</a></li>
                            <li><a href="html_categories/fluids/flu-b.html">Head Loss</a></li>
                            <li><a href="html_categories/fluids/flu-c.html">Hydrostatics</a></li>
                            <li><a href="html_categories/fluids/flu-d.html">Internal Flow and Losses</a></li>
                            <li><a href="html_categories/fluids/flu-e.html">Laminar and Turbulent Flow: Smoke Tunnel</a></li>
                        </ul>
                    </section>
                </div>
                <div id="box-4" class="boxes">
                    <section id="heattran">
                        <h3>Heat Transfer</h3>
                        <ul>
                            <li><a href="html_categories/heat_transfer/heat-a.html">Conservation of Energy: Ice Melting Blocks</a></li>
                            <li><a href="html_categories/heat_transfer/heat-b.html">Radiant Energy: Parabolic Concentrator</a></li>
                        </ul>
                    </section>
                </div>
            </div>

        <div class="categories-box-2">
            <div id="box-5" class="boxes">
                <section id="matsci">
                    <h3>Material Science</h3>
                    <ul>
                        <li><a href="html_categories/material_science/matsci-a.html">Deformation: Bending a Knife Blade</a></li>
                        <li><a href="html_categories/material_science/matsci-b.html">Deformation: Shape Memory Alloys</a></li>
                        <li><a href="html_categories/material_science/matsci-c.html">Primary and Secondary Creep: Creepy Plastic</a></li>
                    </ul>
                </section>
            </div>
            <div id="box-6" class="boxes">
                <section id="mechanics">
                    <h3>Mechanics</h3>
                    <ul>
                        <li><a href="html_categories/mechanics/mech-a.html">Axial Strain</a></li>
                        <li><a href="html_categories/mechanics/mech-b.html">Beam Bending: Foam Beam</a></li>
                        <li><a href="html_categories/mechanics/mech-c.html">Design of Axial Members</a></li>
                        <li><a href="html_categories/mechanics/mech-d.html">Elastic vs. Plastic</a></li>
                        <li><a href="html_categories/mechanics/mech-e.html">Load Conditions: Rubber Shapes</a></li>
                        <li><a href="html_categories/mechanics/mech-f.html">Paper Stress Concentrations</a></li>
                        <li><a href="html_categories/mechanics/mech-g.html">Shear Demonstrator</a></li>
                        <li><a href="html_categories/mechanics/mech-h.html">Stress/Strain: A Strainge Transformation</a></li>
                        <li><a href="html_categories/mechanics/mech-i.html">Stress/Strain Transformation: The Big Book of Shear</a></li>
                        <li><a href="html_categories/mechanics/mech-j.html">Thermal Expansion</a></li>
                        <li><a href="html_categories/mechanics/mech-k.html">Thin Wall Pressure Vessels - Balloons</a></li>
                        <li><a href="html_categories/mechanics/mech-l.html">Thin Wall Pressure Vessels - Hot Dogs</a></li>
                        <li><a href="html_categories/mechanics/mech-m.html">Thin Wall Pressure Vessels</a>
                        <li><a href="html_categories/mechanics/mech-n.html">Torsion: Tower of Torque</a></li>
                    </ul>
                </section>
            </div>
            <div id="box-7" class="boxes">
                <section id="statics">
                    <h3>Statics</h3>
                    <ul>
                        <li><a href="html_categories/statics/stat-a.html">Concentrated Cable Loads: The Ski Gondola</a></li>
                        <li><a href="html_categories/statics/stat-b.html">Coulomb Friction: Fun with Friction</a></li>
                        <li><a href="html_categories/statics/stat-c.html">Force Vector: Amazing Weight Loss Program</a></li>
                        <li><a href="html_categories/statics/stat-d.html">Frame Demos</a></li>
                        <li><a href="html_categories/statics/stat-e.html">Friction: Belt Friction</a></li>
                        <li><a href="html_categories/statics/stat-f.html">Loading: Distributed Student Loading</a></li>
                        <li><a href="html_categories/statics/stat-g.html">Mechanical Advantage: Pulleys - Equilibrator Challenge</a></li>
                        <li><a href="html_categories/statics/stat-h.html">Mechanical Advantage: The Torque Tester</a></li>
                        <li><a href="html_categories/statics/stat-i.html">Moments: Lug Wrench vs. Breaker Bar</a></li>
                        <li><a href="html_categories/statics/stat-j.html">Moments: Moments and Couples</a></li>
                        <li><a href="html_categories/statics/stat-k.html">Moments: The Persuader</a></li>
                        <li><a href="html_categories/statics/stat-l.html">Moments: Varignon's I-Beam</a></li>
                        <li><a href="html_categories/statics/stat-m.html">Truss Design: K'NEX Trusses</a></li>
                        <li><a href="html_categories/statics/stat-n.html">Truss Design: Ruler Truss</a></li>
                        <li><a href="html_categories/statics/stat-o.html">Truss Design: Wacky Fun Noodle</a></li>
                        <li><a href="html_categories/statics/stat-p.html">Truss Design: Wooden Truss 2D</a></li>
                        <li><a href="html_categories/statics/stat-q.html">Truss Design: Wooden Truss 3D</a></li>
                        <li><a href="html_categories/statics/stat-r.html">Uniformly Loaded Cables</a></li>
                        <li><a href="html_categories/statics/stat-s.html">Zero Force Members</a></li>
                    </ul>
                </section>
            </div>
            <section id="thermodynamics">
                <div id="box-8" class="boxes">
                    <h3>Thermodynamics</h3>
                    <ul>
                        <li><a href="html_categories/thermodynamics/therm-a.html">2nd Law - Direction</a></li>
                        <li><a href="html_categories/thermodynamics/therm-b.html">2nd Law - Losses</a></li>
                        <li><a href="html_categories/thermodynamics/therm-c.html">Boiling Point: The Hand Boiler</a></li>
                        <li><a href="html_categories/thermodynamics/therm-d.html">Boiling Properties</a></li>
                        <li><a href="html_categories/thermodynamics/therm-e.html">Closed vs. Open Systems</a></li>
                        <li><a href="html_categories/thermodynamics/therm-f.html">Conservation of Mass: Molasses Madness</a></li>
                        <li><a href="html_categories/thermodynamics/therm-g.html">Density and Buoyancy: The Lava Lamp</a></li>
                        <li><a href="html_categories/thermodynamics/therm-h.html">Otto Cycle: Engine Knock</a></li>
                        <li><a href="html_categories/thermodynamics/therm-i.html">Psychrometry</a></li>
                        <li><a href="html_categories/thermodynamics/therm-j.html">Total Energy - Fan Box</a></li>
                        <li><a href="html_categories/thermodynamics/therm-k.html">Total Energy</a></li>
                        <li><a href="html_categories/thermodynamics/therm-l.html">Vapor Power Cycle: The Little Engine That Could</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
</content>

    <footer>
        <div class="footer">
            <p>Tyler Kautz, Trevor Swann, Jacob Stambaugh. Copyright &copy; 2019. Some Rights Reserved.</p>
        </div>
    </footer>
</body>    
</html>

以下是collapse.css的内容:

@font-face {
    font-family: Raleway;
    src: url(../font/Raleway-Regular.ttf);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    color: black;
    font-family: Raleway;
    background-color: white;
}

/* Navigation */

.nav {
    color: white;
    height: 70px;
    line-height: 70px;
    text-align: left;
    background-color: #222629;
    border-bottom: 3px solid #86C232;
}

.menu a {
    float: left;
    text-decoration: none;
    color: white;
    line-height: 60px;
    height: 60px;
    padding: 5px 12.5px;
    margin-bottom: -17px;
}

.menu a:hover {
    background-color: #6B6E70;
    text-decoration: underline;
    text-decoration-color: #86C232;
}

.logo {
    padding: 0 5px 0 5px;
    font-size: 34px;
}

.logo a {
    color: #86C232;
}

.logo a:hover{
    background-color: #222629;
}

label{
    margin: 0 0 0 20px;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: left;
}

#toggle {
    display: none;
}

/* Search Bar */
.search-bar-input {
    float: right;
}

input[type=text] {
  padding: 9px;
  margin-top: 16px;
  font-size: 17px;
  border: none;
}

.search-bar-input button {
  float: right;
  padding: 9px 12px;
  margin-top: 16px;
  margin-right: 16px;
  background-color: #86C232;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.search-bar-input button:hover {
    background-color: #6B6E70; 
}

/* Content Div */
#welcome {
    width: 100%;
    height: auto;
}

.content {
    margin: 0 12.5% 0 12.5%;
}

.categories-box-1, .categories-box-2 {
    display: flex;
    flex-direction: column;
}

h3 {
    padding-left: 20%;
    text-align: center;
    text-decoration: underline;
}

.boxes {
    margin: 10px;
    width: 80%;
}

.boxes a{
    text-decoration: none;
    color: black;
}

.boxes ul {
    padding-left: 35%;
}

.boxes ul li {
    list-style: none;
    padding: 5px 10px 5px 10px;
}

.boxes ul li a:hover {
    border-bottom: 2px solid #86C232;

}


/* Footer */
.footer {
    color: white;
    float: left;
    width: 100%;
    text-align: center;
    background-color: #222629;
}


/* Media Query */
@media only screen and (max-width: 1400px){
    /* Navigation */
    label{
        display: block;
        cursor: pointer;
    }

    .menu {
        margin: 0;
        width: 100%;
        display: none;
        text-align: center;
        background-color: #222629;
    }

    .menu a {
        float: none;
        clear: left;
        display: block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0;
        padding: 0;
    }

    .menu a:hover {
        background-color: #6B6E70;
        text-decoration: underline;
        text-decoration-color: #86C232;
    }

    #toggle:checked + .menu {
        display: block;
    }

    .logo {
        float: right;
        padding: 5px;
    }

    .logo a {
        border: none;
    }

    /* Content */

    .categories-box-1, .categories-box-2 {
        display: flex;
        flex-direction: column;
    }

    .boxes {
        width: 95%;
    }

    .boxes ul {
        padding-left: 20%;
    }
}

@media only screen and (max-width: 680px){
    content {
        margin: 0 5% 0 5%;
    }

    .boxes ul {
        padding-left: 20%;
    }
}

@media only screen and (max-width: 480px){
    .content {
        margin: 0 2% 0 2%;
    }

    h3 {
        padding-left: 0;
    }

    .boxes ul {
        padding-left: 2%;
    }

   #toggle:checked + .menu {
        display: block;
    }
}
html css
1个回答
1
投票

您应该使用min-height属性,而不是height像这样.nav类:

.nav {
    ...
   min-height: 70px;
   ...
}

打开菜单时将拉低内容。

Fiddle demo

© www.soinside.com 2019 - 2024. All rights reserved.