如何制作不同的导航？ [英] How to make a different nav?

问题描述

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

推荐答案

color-white;
头寸：固定;
top：13rem;
右：5rem;
z-index：1000;




}

& _bg：hover {
transform：scale（200）;
身高：7rem;
宽度：7rem;
border-radius：50％;
background-image：radial-gradient（

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-primary,

color-dark-green）;
头寸：固定;
top：13rem;
右：5rem;
z-index：500;


}

& _bg {

过渡：全部2s;
身高：7rem;
宽度：7rem;
border-radius：50％;
background-image：radial-gradient（

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(

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