30天打造品牌特色电商网站 Day.14 导览列基础制作（下）

今天我们就来继续做导览列的部分，昨天的HTML已经制作出了导览列的框架，今天就利用CSS来做一些美化以及互动吧！

先写掉选单及连结的预设样式，把前面的黑点跟底线去除，再调整文字间距及颜色。

ul{
	list-style: none; /* 取消前面的黑点*/
	padding: 0;
	margin: 0;
}

a{
	text-decoration: none; /* 文字无底线*/
}

.menu > li > a{
	display: block;
	line-height: 20px;
	padding: 28px 16px;
	margin-right: 4px;
	color: #000;
}

利用 标签可以让元件浮动，控制元件在导览列对应的位置上，使用 <float: left>可以让元素彼此相邻浮动，以达到导览列横向排列的效果。

.navbar .logo{
	float: left; /* 把logo浮动至左 */
	margin-top: 24px;
}

.menu{
	float: right; /* 把选单浮动至右 */
}

.menu > li{
	float: left; /* 让选项从直的排列变成横的 */
}

最後在写到互动前，简单跟大家介绍一下css的几个标签。

• <transform> 可以使用它来移动、旋转、缩放和倾斜元素

transform: translate() 可以让元素做位置的移动，调整方式为x轴、y轴的参数。

div {
  transform: translateX(100px);
}

transform: rotate() 可以根据给定的度数顺时针或逆时针旋转元素。

div {
  transform: rotate(75deg);
}

transform: scale() 可以倍数放大或缩小元素，调整方式为宽度和高度的参数。

div {
  transform: scale(0.5, 0.5);
}

• <transition>可以使用它来添加过渡效果

transition 可以针对css属性变化的部分设定效果持续时间（秒数）。

div {
  transition: width 1s;
}

transition-delay 可以指定效果的延迟时间（秒数）。

div {
  transition-delay: 1s;
}

transition-timing-function 可以指定过渡效果的速度曲线。

div {
  transition-timing-function: linear;
}

最後我们就可以用这些标签把下拉式选单以及互动效果做出来！

.menu .dropdown{
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%); /* 移动下拉选单的位置 */
	background-color: #000;

	opacity: 0; /* 调整不透明度 */
	visibility: hidden;
	transition: all 0.3s; /*控制过渡时间 */
	background-color: #000;
}
.menu > li:hover .dropdown{
	opacity: 1; /* 调整不透明度 */
	visibility: visible;
	top: 100%;
}
.menu .dropdown > li > a{
	display: block;
	line-height: 24px;
	padding: 8px 24px;
	color: #fff;
	width: 200px;
	transition: all 0.2s;/*控制过渡时间 */
}
.menu .dropdown > li > a:hover{ /*鼠标悬停时改变属性 */
	background-color: #3a3a3a;
}

以上的范例大家可以到连结的codepen去做改动编辑，看看做出来的效果，进而更加认识语法的使用方式喔！
codepen

利用这些标签可以做出自己喜欢的样式，让网站中不可或缺的导览列有更多设计巧思，css做出的互动效果也可以运用在网站其他元件，大家可以再多多摸索～