HTML水平导航栏伸缩效果

朱雀 2021-09-26 08:02 454阅读 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 条评论，454人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关导航栏切换效果

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

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

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

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

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

相关 wepy底部导航栏效果

文档 [wepy快速指南][wepy] [小程序框架wepy开发文档][wepy 1] [wepy开源][wepy 2] [wepy官方文档][w

不念不忘少年蓝@/ 2022年03月01日 01:46/ 0 赞/ 396 阅读

相关 wepy底部导航栏效果

文档 [wepy快速指南][wepy] [小程序框架wepy开发文档][wepy 1] [wepy开源][wepy 2] [wepy官方文档][w

Bertha 。/ 2022年01月26日 00:13/ 0 赞/ 328 阅读

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

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

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

相关底部导航栏效果

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

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