使用css制作斜角水平菜单导航

制作一个带有斜角的水平菜单,可能会给你带来一些灵感。

9.jpg

本例的关键在于,如何制作出左上角这个斜角。制作 “带箭头的菜单“ 这个例子就很容易实现;核心思想就是利用边框的接角位置构造出一个斜角,对于每个菜单的a元素,放置一个span元素,设为corner类别,并作为CSS“角”,用于实现斜角效果,代码结构如下所示:

<div id="menu">
    <a href="#"><span class="men"></span>首页</a>
    <a href="#"><span class="men"></span>关于我们</a>
    <a href="#"><span class="men"></span>服务项目</a>
    <a href="#"><span class="men"></span>网页设计</a>
    <a href="#"><span class="men"></span>联系我们</a>
</div>

首先简单定义下全局样式:

#menu{
       font-family:Arial, Helvetica, sans-serif;
       font-size:14px;
       margin:100px auto;
       width:600px;
}

接着,设置每个菜单项的基本属性:

#menu a,#menu a:visited{
       display:block;
       float:left;
       position:relative;
       text-decoration:none;
       color:#FFF;
       background:#455552;
       padding:8px 32px;
       margin:0 1px;
}

现在你已经可以在游览器看到点效果了吧!

接下来就是设置斜角的方法了,写上去:

#menu a .men{
       position:absolute;
       height:0;
       width:0;
       overflow:hidden;
       border-bottom:solid 6px #16A387;
       border-left:solid 6px #FFF;
       top:0;
       left:0;
}

接着继续写鼠标经过的效果:

#menu a:hover{
       color:#fff;
       background:#16A387;
}

回到游览器看看效果,是不是有点像“折角”的效果,看起来也不错,如果喜欢这个效果可以到这里就结束了。

如果希望再完美一点,鼠标经过斜角部分也变成背景色,可以增加以下代码:

#menu a:hover span.men{
       border-bottom:solid 6px #333;
}

刷新看看,是不是有什么变化!

至此我们得这个案例已经完成了,如你所见,你可以改变它的颜色,也可以把四个角都做成折角。


原文链接:HelloWeb前端网 » 使用css制作斜角水平菜单导航 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享