如何制作下拉菜单幻灯片？

问题描述 投票：0回答：1

我在此下拉菜单中遇到问题。我想在以下页面上滑动放置菜单：https://codepen.io/dghez/pen/Kwoper，但是有代码在scss中编写，我不知道如何在css中进行编译。如果有帮助，我将不胜感激。我认为我做得很好，但无法在此页面上进行同样的下拉菜单。

body{
	margin:0;
	padding:0;
}

.nav ul{
	list-style:none;
}
.nav{
	display:inline-block;
	text-align:center;
	position:absolute;
	top:10%;
	left:50%;
	transform:translate(-50%,-50%);
}


.nav li:hover{
	background-color:yellow;
}

.nav>ul{
	list-style:none;
	padding:0;
	margin:0;
	display:inline-block;
	color:#fff;
	background-color:green;
}
.nav>ul>li{
	position:relative;
	cursor:pointer;
	font-size:20px;
	letter-spacing:1px;
	float:left;
	width:136px;
	height:50px;
	line-height:50px;
	
}


.dropdown{
	position:absolute;
	top:48px;
	left:0;
	width:100%;
	padding:0;
	transform:translate(0,100%);
	
	
	
	
}

.dropdown li{
	background-color:blue;
	top:48px;
	
	

	
}

.dropdown li:hover{
	background-color:orange;
}
.dropdown li{
	display:none;
}

.nav li:hover .dropdown li{
	display:block;
}

.nav li:hover .dropdown{
	transform:translate(0,0);
	transition:2s;
}
<!DOCTYPE html>
<html lang="pl">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<title>Pierwsza strona</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style100.css">

</head>
 <div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a>
      <ul class="dropdown">
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Photography</a></li>
	      <li><a href="#">Graphics</a></li>
          <li><a href="#">Marketing</a>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
	

</body>

</html>
html css
1个回答
0
投票

您的要求非常简单。为此，您需要将SCSS转换为CSS。您可以使用此链接进行此操作：SCSS to CSS converter。另外，请检查输出是否符合您的要求。

* {
	 box-sizing: border-box;
}
 body {
	 font-family: 'Open Sans', sans-serif;
	 background: #374954;
	 color: white;
	 text-align: center;
}
 #main {
	 position: relative;
	 list-style: none;
	 background: #6bbe92;
	 font-weight: 400;
	 font-size: 0;
	 text-transform: uppercase;
	 display: inline-block;
	 padding: 0;
	 margin: 50px auto;
}
 #main li {
	 font-size: 0.8rem;
	 display: inline-block;
	 position: relative;
	 padding: 15px 20px;
	 cursor: pointer;
	 z-index: 5;
	 min-width: 120px;
}
 li {
	 margin: 0;
}
 .drop {
	 overflow: hidden;
	 list-style: none;
	 position: absolute;
	 padding: 0;
	 width: 100%;
	 left: 0;
	 top: 48px;
}
 .drop div {
	 -webkit-transform: translate(0, -100%);
	 -moz-transform: translate(0, -100%);
	 -ms-transform: translate(0, -100%);
	 transform: translate(0, -100%);
	 -webkit-transition: all 0.5s 0.1s;
	 -moz-transition: all 0.5s 0.1s;
	 -ms-transition: all 0.5s 0.1s;
	 transition: all 0.5s 0.1s;
	 position: relative;
}
 .drop li {
	 display: block;
	 padding: 0;
	 width: 100%;
	 background: #3e8760 !important;
}
 #marker {
	 height: 6px;
	 background: #3e8760 !important;
	 position: absolute;
	 bottom: 0;
	 width: 120px;
	 z-index: 2;
	 -webkit-transition: all 0.35s;
	 -moz-transition: all 0.35s;
	 -ms-transition: all 0.35s;
	 transition: all 0.35s;
}
 #main li:nth-child(1):hover ul div {
	 -webkit-transform: translate(0, 0);
	 -moz-transform: translate(0, 0);
	 -ms-transform: translate(0, 0);
	 transform: translate(0, 0);
}
 #main li:nth-child(1):hover ~ #marker {
	 -webkit-transform: translate(0px0);
	 -moz-transform: translate(0px0);
	 -ms-transform: translate(0px0);
	 transform: translate(0px0);
}
 #main li:nth-child(2):hover ul div {
	 -webkit-transform: translate(0, 0);
	 -moz-transform: translate(0, 0);
	 -ms-transform: translate(0, 0);
	 transform: translate(0, 0);
}
 #main li:nth-child(2):hover ~ #marker {
	 -webkit-transform: translate(120px0);
	 -moz-transform: translate(120px0);
	 -ms-transform: translate(120px0);
	 transform: translate(120px0);
}
 #main li:nth-child(3):hover ul div {
	 -webkit-transform: translate(0, 0);
	 -moz-transform: translate(0, 0);
	 -ms-transform: translate(0, 0);
	 transform: translate(0, 0);
}
 #main li:nth-child(3):hover ~ #marker {
	 -webkit-transform: translate(240px0);
	 -moz-transform: translate(240px0);
	 -ms-transform: translate(240px0);
	 transform: translate(240px0);
}
 #main li:nth-child(4):hover ul div {
	 -webkit-transform: translate(0, 0);
	 -moz-transform: translate(0, 0);
	 -ms-transform: translate(0, 0);
	 transform: translate(0, 0);
}
 #main li:nth-child(4):hover ~ #marker {
	 -webkit-transform: translate(360px0);
	 -moz-transform: translate(360px0);
	 -ms-transform: translate(360px0);
	 transform: translate(360px0);
}
 
<!-- not responsive yet -->
<nav>
  <ul id="main">
    <li>Home</li>
    <li>About</li>
    <li>Portfolio
      <ul class="drop">
        <div>
        <li>Web Design</li>
        <li>Photography</li>
        <li>Graphics</li>
        </div>
      </ul>
    </li>
    <li>Contact</li>
    <div id="marker"></div>
  </ul>
</nav>

希望这会有所帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.