html - 如何在 HTML 和 CSS 中制作幻灯片内容？

问题描述

上图是我的首页，当我点击圆圈时会打开剩下的导航栏。

但是当我点击我为导航制作的圆形图标时，它会打开，但整个导航没有显示，那么应该怎么做才能让幻灯片看到所有导航？

这是我制作导航栏的 HTML 文件，但我的导航列表更多且无法正确显示。如何使导航滑入？

<?php
//map based on Bar

$map = [
    'Bar'  => 1, 
    'Pascal' =>100000 ,
    'Pound per square inch' => 14.5038 , 
    'Standard atmosphere' => 0.986923,
    'Torr' => 750.062,

    
    
];

if (isset($_POST['submit'])) {
    $fromUnit = $_POST['fromUnit']  ?? '';
    $toUnit = $_POST['toUnit']  ?? '';
    $Pressure = $_POST['Pressure'] ?? '';
    $result = $map[$toUnit] / $map[$fromUnit];
   
}


?>
<!DOCTYPE html>
<html>

<head>
<!-- add icon link -->
        <link rel = "icon" href =  
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png" 
        type = "image/x-icon"> 
        
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Data Rate Convertor</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/css/pikaday.min.css">
    <link rel="stylesheet" href="assets/css/untitled.css">
    <link rel="stylesheet" href="navbar.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    
</head>

<body>
    <nav style="background:linear-gradient(-135deg, #c850c0, #4158d0)"class="navbar navbar-dark navbar-expand-lg fixed-top bg-white portfolio-navbar gradient">
    <div class="container"><a class="navbar-brand logo" href="#">SimplyCalculate</a>
    
    <div class="collapse navbar-collapse"
            id="navbarNav">
            <ul class="nav navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link active" href="">Standard Calculator</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="#">Scientific Calculator</a></li>
                <li class="nav-item"><a class="nav-link active" href="#">Date calculator</a></li>
                <li class="nav-item"><a class="nav-link active" href="#">Fuel Economy</a></li>
            

            </ul>
        </div><input type="checkbox" id="active">
    <label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
    <div class="wrapper">
      <ul>
<li><a href="#">Area Convertor</a></li>
<li><a href="#">Data Transfer Rate</a></li>
<li><a href="#">Digital Storage</a></li>
<li><a href="#">Energy Convertor</a></li>
<li><a href="#">Frequency Convertor</a></li>
<li><a href="#">Length Convertor</a></li>
<li><a href="#">Mass Convertor</a></li>
<li><a href="#">Plane Angle Convertor</a></li>
<li><a href="#">Pressure Convertor</a></li>
<li><a href="#">Speed Convertor</a></li>
<li><a href="#">Temperature Convertor</a></li>
<li><a href="#">Time Convertor</a></li>
<li><a href="#">Volume Convertor</a></li>

</ul>
</div>
 
<div id="main">
<!-- Add all your websites page content here  -->
</div>
            <div class="collapse navbar-collapse"
                id="navbarNav">
                <ul class="nav navbar-nav ml-auto"></ul>
            </div>
        </div>
    </nav>
    <main class="page contact-page">
        <section class="portfolio-block contact">
            <div class="container">
                <div class="heading">
                    <h2>Pressure Convertor</h2>
                </div>
                <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
                    <div class="form-group"><label for="Pressure">Enter Pressure value to be converted:</label>
                    <input class="form-control item" id="Pressure" type="number" name="Pressure" value="<?php echo (!empty($Pressure)) ? $Pressure : '' ?>">
                    </div>
                     <div class="form-group"><label for="fromUnit">Convert From</label>
                    <select name="fromUnit" id="fromUnit" class="form-control">
    <option selected>Choose</option>
        <option value="Bar">Bar </option>
        <option value="Pascal">Pascal </option>
        <option value="Pound per square inch">Pound per square inch</option>
        <option value="Standard atmosphere">Standard atmosphere</option>
        <option value="Torr">Torr</option>
        
    </select></div>
     <div class="form-group"><label for="toUnit">Convert To</label>
                    <select name="toUnit" id="toUnit" class="form-control">
        <option  selected >Choose</option>
         <option value="Bar">Bar </option>
        <option value="Pascal">Pascal </option>
        <option value="Pound per square inch">Pound per square inch</option>
        <option value="Standard atmosphere">Standard atmosphere</option>
        <option value="Torr">Torr</option>
</select></div>
                    <div class="form-group"><button class="btn btn-primary btn-block btn-lg" name="submit" type="submit" value="Convert">Convert Pressure</button></div>
                    
                </form>
            </div>
            <?php 
            if($_SERVER['REQUEST_METHOD'] == 'POST')
            { 
            echo "<center><b>$Pressure $fromUnit = " . $_POST['Pressure'] * $result . " $toUnit</b></center>";
            } 
            ?>
        </section>
    </main>
    <footer class="page-footer">
        <div class="container">
            <div class="links"></div>
        </div>
    </footer>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
    <script src="assets/js/theme.js"></script>
</body>

</html>

这是我导航的 CSS。我应该改变什么才能使导航看起来完美？


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.wrapper{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  /* clip-path: circle(25px at calc(0% + 45px) 45px); */
  clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
}
#active:checked ~ .wrapper{
  clip-path: circle(100%);
}
.menu-btn{
  position: absolute;
  z-index: 2;
  right: 20px;
  /* left: 20px; */
  top: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  transition: all 0.3s ease-in-out;
}
#active:checked ~ .menu-btn{
  background: #fff;
  color: #4158d0;
}
#active:checked ~ .menu-btn i:before{
  content: "\f00d";
}
.wrapper ul{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}
.wrapper ul li{
  margin: 15px 0;
}
.wrapper ul li a{
  color: none;
  text-decoration: none;
  font-size: 30px;
  font-weight: 200;
  padding: 5px 30px;
  color: #fff;
  position: relative;
  line-height: 50px;
  transition: all 0.3s ease;
}
.wrapper ul li a:after{
  position: relative;
  content: "";
  background: #fff;
  width: 100%;
  height: 50px;
  left: 0;
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
  transform: scaleY(1);
}
.wrapper ul li a:hover{
  color: #4158d0;
}
input[type="checkbox"]{
  display:none;
}
.content{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  text-align: center;
  width: 100%;
  color: #202020;
}
.content .title{
  font-size: 40px;
  font-weight: 700;
}
.content p{
  font-size: 20px;
  font-weight: 600;
}

或者如何制作显示所有导航的下拉列表？

标签： htmlcssresponsive-design

html - 如何在 HTML 和 CSS 中制作幻灯片内容？

问题描述

或者如何制作显示所有导航的下拉列表？

解决方案

推荐阅读