如何制作不同的导航？

问题描述

I am just trying to make a nav which will come out when we will click on the nav icon.And i known this can be done in pure css.But i am not getting it done.I need help..

<nav class="navigation">
      <div class="navigation_bg"></div>
    <div class="navigation_icon"></div>
    <div class="navigation_cross"></div>

    <div class="navigation_components">
      <ul class="navigation_list">
        <li class="navigation_items"> <a href="#" class="navigation_links"><span>01</span>Home</a></li>
        <li class="navigation_items"> <a href="" class="navigation_links"><span>02</span>About Us</a></li>
        <li class="navigation_items"> <a href="" class="navigation_links"><span>03</span>Services</a></li>
        <li class="navigation_items"> <a href="" class="navigation_links"><span>04</span>Contact Us</a></li>
        <li class="navigation_items"> <a href="" class="navigation_links"><span>05</span>Features</a></li>
      </ul>
    </div>



</nav>

.navigation{


&_icon  {

height: 7rem;
width:7rem;
border-radius: 50%;
background-color: $color-white;
position: fixed;
top: 13rem;
right: 5rem;
z-index: 1000;




}

&_bg:hover{
	transform: scale(200);
height: 7rem;
width:7rem;
border-radius: 50%;
background-image: radial-gradient($color-primary,$color-dark-green);
position: fixed;
top: 13rem;
right: 5rem;
z-index: 500;


}

&_bg{

transition: all 2s;
height: 7rem;
width:7rem;
border-radius: 50%;
background-image: radial-gradient($color-primary,$color-dark-green);
position: fixed;
top: 0;
right: 0;
z-index: 2500;
position: relative;
opacity: 0;

}

&_components{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 3000;
}


&_list{
	font-size:2.3rem;
list-style: none;


}

&_items{
	margin: 2rem;
	text-align: center;

}

&_links{
	font-size: 3rem;
	transition: all .5s;
	text-decoration: none;
	color: $color-white;
padding: 1rem 2rem;
text-transform: uppercase;
background-image: linear-gradient(120deg,transparent 0%,transparent 50%,$color-white 50%);
background-size: 300%;
opacity: 0;

span{
	margin-right: .5rem;
}

}


&_links:hover,
&_links:active{

background-position:  100%;
color: $color-medium-green;
transform: translateX(1rem);


}

&_icon:hover ~ &_bg {

transform: scale(200);
height: 7rem;
width:7rem;
border-radius: 50%;
background-image: radial-gradient($color-primary,$color-dark-green);
z-index: 2500;

opacity: 1;

}




}

我尝试了什么：



我试图通过使用我自己的逻辑来实现它。但是，它不工作

What I have tried:

I tried to make it by using my own logic.But it,s not working

推荐答案

这篇关于如何制作不同的导航？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！