HTML侧边导航栏

Posted 2023-04-08 极客李华

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML侧边导航栏相关的知识，希望对你有一定的参考价值。

html侧边导航栏

简介：本文用最简洁的语言，来教会读者，如果用html+css来制作，侧边导航栏，本案例以手机商城中的部分为例子来制作。

第一步：构建框架

<body>
    <!-- 首先确定导航栏中的内容 每个内容用链接标签<a>表示 -->
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
</body>

运行结果：

第二步：CSS渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单版商城侧边栏</title>
    <style>        
        a 
            /* 1.把a转换为块级元素 这样就可以让链接竖着表示了*/            
            display: block;

            /* 设置长度与宽度 */
            width: 200px;
            height: 40px;

            /* 设置背景颜色 */
            background-color: #55585a;
            
            /* 设置字体大小 */
            font-size: 14px;

            /* 设置字体颜色 */
            color: #fff;

            /* 链接没有下划线 */
            text-decoration: none;
            
            /* 设置左边的内边距 */
            padding-left: 30px;
            
            /* 设置文本边距 */
            line-height: 40px;
        

        /* 2.鼠标经过链接变换背景颜色 */
        a:hover 
            background-color: #ff6700;
        
    </style>
</head>

<body>
    <!-- 首先确定导航栏中的内容 每个内容用链接标签<a>表示 -->
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
</body>

</html>

运行结果：

jQuery+css3侧边栏导航菜单

效果体验：http://hovertree.com/texiao/jquery/37/

代码如下：

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery和CSS3炫酷按钮点击波特效 - 何问起</title><base target="_blank" />


<!--主要样式-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*hovertreenav styles*/
.hovertreenav ul {
background: white;
border-top: 6px solid hsl(180, 40%, 60%);
width: 200px;
margin: 5em auto;
}

.hovertreenav ul li {
list-style-type: none;
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden;
}

.hovertreenav ul li a {
font: normal 14px/28px Montserrat;
color: hsl(180, 40%, 40%);
display: block;
padding: 10px 15px;
text-decoration: none;
cursor: pointer; /*since the links are dummy without href values*/
/*prevent text selection*/
user-select: none;
/*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
position: relative;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.hovertreenav .ink {
display: block;
position: absolute;
background: hsl(180, 40%, 80%);
border-radius: 100%;
transform: scale(0);
}
/*animation effect*/
.hovertreenav .ink.animate {
animation: ripple 0.65s linear;
}

@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
transform: scale(2.5);
}
}
</style>

<!--[if IE]>
<script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>
<![endif]-->

</head>
<body style="background:#D1EFFE;">

<div class="hovertreenav">
<ul>
<li><a href="http://hovertree.com">何问起</a></li>
<li><a href="http://hovertree.com/menu/bootstrap/">Bootstrap</a></li>
<li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li>
<li><a href="http://hovertree.com/menu/webfront/">web前端</a></li>
<li><a href="http://hovertree.com/h/bjaf/kqud99m6.htm">CSS3动画</a></li>
<li><a href="http://hovertree.com/h/bjaf/mcpnogp6.htm">HTML5红包</a></li>
<li><a>点我有水波</a></li>
</ul>
</div>

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
//jQuery time
var parent, ink, d, x, y;
$(".hover"+"treenav ul li a").click(function(e){
parent = $(this).parent();
//create .ink element if it doesn\'t exist
if(parent.find(".ink").length == 0)
parent.prepend("<span class=\'ink\'></span>");

ink = parent.find(".ink");
//incase of quick double clicks stop the previous animation
ink.removeClass("animate");

//set size of .ink
if(!ink.height() && !ink.width())
{
//use parent\'s width or height whichever is larger for the diameter to make a circle which can cover the entire element.
d = Math.max(parent.outerWidth(), parent.outerHeight());
ink.css({height: d, width: d});
}

//get click coordinates
//logic = click coordinates relative to page - parent\'s position relative to page - half of self height/width to make it controllable from the center;
x = e.pageX - parent.offset().left - ink.width()/2;
y = e.pageY - parent.offset().top - ink.height()/2;

//set the position and add class .animate
ink.css({top: y+\'px\', left: x+\'px\'}).addClass("animate");
})
</script>

</body>
</html>

web前端汇总:http://www.cnblogs.com/jihua/p/webfront.html

以上是关于HTML侧边导航栏的主要内容，如果未能解决你的问题，请参考以下文章

HTML侧边导航栏

侧边导航栏滚动条---CSS overflow实现