How to make slide the content in HTML and CSS?

Question

The above image is my front page when I will click on the circle it will open the remaining navigation bar.

But when I click on the circle icon that I made for navigation it open, but the whole navigations not displayed so what should do to make slide to see all navigations?

This is my HTML file I had made the navigation bar, but my list of navigation is more and its not displaying properly. How can I make the navigation to slide in?

 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];
   
}


?>





         
        
    
    
    Data Rate Convertor
    
    
    
    
    
    
    



    
    SimplyCalculate
    
    
            
                Standard Calculator
            
            
                Scientific Calculator
                Date calculator
                Fuel Economy
            

            
        

    
    
      
Area Convertor
Data Transfer Rate
Digital Storage
Energy Convertor
Frequency Convertor
Length Convertor
Mass Convertor
Plane Angle Convertor
Pressure Convertor
Speed Convertor
Temperature Convertor
Time Convertor
Volume Convertor



 



            
                
            
        
    
    
        
            
                
                    Pressure Convertor
                
                
                    Enter Pressure value to be converted:
                    
                    
                     Convert From
                    
     Convert To
                    
                    
                    
                
            
            $Pressure $fromUnit = " . $_POST['Pressure'] * $result . " $toUnit";
            } 
            ?>

This is CSS for my navigation. What should I change to make the navigation to look perfect?


@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;
}

OR how can I make the drop down list for displaying the all navigations ?

A Haworth · Accepted Answer

The drop down list is scrollable as it is so long.

You can change the font-size of its elements down a bit to make it fit on more devices without scrolling, but with a long list it may not be possible to change the size down enough and still have it readable on very small devices.

One thing you can do is choose a font size that is proportional to the size of the device (e.g. using vh units) but be wary of that as you can end up with very small, unreadable characters.

How to make slide the content in HTML and CSS?

OR how can I make the drop down list for displaying the all navigations ?

Answers (2)

Related Questions