HTML水平导航栏伸缩效果

朱雀 2021-09-26 08:02 486阅读 0赞

# 前端知识 #

感觉自己前端不是很好，还要多多练习。做了一下笔记。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平导航栏伸缩动画效果</title>
        <script src="../js/jquery.min.js"></script>
        <style> *{ margin: 0px; padding: 0px; font-size: 14px; } ul{ list-style: none; /*无序号*/ height: 50px; padding-left: 30px; border-bottom: 5px solid #f60; /*整个 ul 的底部变宽，为一条线*/ } li{ float: left; margin-top: 20px; } a{ text-decoration: none;/* a 标签的下划线*/ display: block;/*将 a 标签变成一个块，进而可以设置属性*/ height: 30px; line-height: 30px; /*文字居中*/ width: 120px; background-color: #ccc; margin-bottom: 1px; text-align: center; } a:hover{ color: #fff; background-color: #f60; height: 30px; line-height: 30px; } </style>
        <script> $(function () { $("a").hover( function () { $(this).stop().animate({ "width":"170px"},200); },function () { $(this).stop().animate({ "width":"120px"},200); } ) }); </script>
    </head>
    <body>
    <ul>
        <li><a href="#">首  页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
    </body>
    </html>

# 效果 #

![这里写图片描述][SouthEast]

[SouthEast]: /images/20210923/88effd4a2d9143148ce6b283f9d167d8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，486人围观）

还没有评论，来说两句吧...

相关阅读

相关滑动导航栏效果 html+css+js

一.先看效果（完整代码在最后）： ![在这里插入图片描述][20210501193422872.gif_pic_center] 实现并不难，但是初学 js 时拿来练手

超、凢脫俗/ 2023年01月18日 06:47/ 0 赞/ 203 阅读

相关 HTML&CSS实现导航栏滑动背景效果

大家可以先看一下背景滚动的效果 ![在这里插入图片描述][20201230172825172.png] ![在这里插入图片描述][20201230172715552.gi

今天药忘吃喽~/ 2023年01月01日 02:48/ 0 赞/ 336 阅读

相关 html导航栏自动调间距,HTML CSS导航栏间距

我做了一个CSS导航栏，但是在每个“navbar-item”之间，都有一点空间。我不希望那里有任何变化！有没有办法做到这一点，而不改变每个navbar-item的余裕？HTML

谁借莪１个温暖的怀抱￠/ 2022年10月05日 15:59/ 0 赞/ 224 阅读

相关 html5 导航栏置顶,html5导航栏横向

html5中怎么样让导航条完全的横向100%显示，附图你里面是不是还有内嵌标签设置了宽度。请注意以下几点一：只能用HTML5 + CSS 二：要保证在不同页面跳转的时候

小灰灰/ 2022年10月05日 10:51/ 0 赞/ 296 阅读

相关使用html和css制作水平导航栏nav

使用html和css制作水平导航栏nav的方法及其效果： 1、li设置float:left; （1）代码片段： ... <style>

小鱼儿/ 2022年07月20日 16:22/ 0 赞/ 264 阅读

相关 jquery水平导航栏动态菜单

附上结果如下: ![这里写图片描述][70] 代码如下: <!DOCTYPE html> <html lang="en"> <head

桃扇骨/ 2022年05月21日 02:40/ 0 赞/ 333 阅读

相关导航栏切换效果

在网页中经常会遇到导航栏切换效果，也就是鼠标放到某一导航栏上，底下对应的内容就会发生变化．下面说一下实现思路：首先说下this的用法： this在事件中指向的是事件源对象

落日映苍穹つ/ 2022年05月17日 01:06/ 0 赞/ 452 阅读

相关 bootstrap制作轮播图,水平导航栏,垂直导航栏

1.官网下载bootstrap [https://v3.bootcss.com/][https_v3.bootcss.com] 2.引入js和相应的css 此处引

忘是亡心i/ 2022年05月16日 10:57/ 0 赞/ 399 阅读

相关 HTML水平导航栏伸缩效果

前端知识感觉自己前端不是很好，还要多多练习。做了一下笔记。 <!DOCTYPE html> <html lang="en"> <head>

朱雀/ 2021年09月26日 08:02/ 0 赞/ 486 阅读

相关底部导航栏效果

<template> <view class="me"> 消息列表界面 </view> </template> <

短命女/ 2021年09月19日 10:36/ 0 赞/ 613 阅读