day10—jQuery初步实践,关于菜单
转行学开发,代码100天——2018-03-26
今天是本人写开发记录方面博客的第10天了,不知不觉已经涉及到jQuery框架的学习了。
第一次熬夜写前端代码还是两年前,不过中途放弃了,学的东西也日渐生疏,但今日持续敲代码的过程中,还是能找回一些当年的感觉了,有一些不同的是,如今需要更强的克制和执行,也多了些功利心理。
不多说,今天记录一下通过jQuery实现垂直和水平菜单功能,缺少配图,重点提供实现的思路。
菜单实现一般都是通过ul,li列表实现的,每个菜单项关联一个链接,即a标签。个人觉得垂直布局和水平布局的实现主要有两个方面的工作,一是菜单内容的布局调整,如位置,字体,背景等,即CSS设计部分;二是菜单操作的交互,即通过jQuery实现对菜单内容的HTML和样式CSS部分的操作(修改,动画等)。
本文的功能实现还相对简单,仅作为记录,若能有益于他人,则不甚欣慰。
垂直菜单&水平菜单
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mycss.css">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<!--垂直菜单-->
<ul>
<li class="main">
<a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul> </li>
<li class="main">
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul> </li>
<li class="main">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul> </li>
</ul> <!--水平菜单--> <br/><br/><br/><br/>
<p>水平菜单</p>
<ul>
<li class="hmain">
<a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul> </li>
<li class="hmain">
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul> </li>
</ul> </body>
</html>
CSS部分:
*{
margin:;
padding:;
}
ul,li
{
text-decoration: none;
}
ul
{ }
.main,.hmain
{
/*可添加背景图片 */
/*background-image: url();
background-repeat: repeat-x;*/
width: 100px;
}
li
{
background-color: #eee;
}
a{
text-decoration: none;
padding-left: 20px;
width: 80px;
padding-top: 3px;
padding-bottom: 3px;
display: block; }
.main a,.hmain a
{
/*color: white;*/
/*background-image: url(images/collapsed.gif);*/
background-repeat: none;
background-position: 3px center;
}
.main li a,.hmain li a
{
color: black;
background-image: none;
}
.main ul,.hmain ul
{
display: none;
}
.hmain
{
float: left;
margin-right: 3px;
}
$(document).ready(function()
{
$(".main>a").click(function()
{
// alert("点击了");
var ulNode = $(this).next("ul");
//方法1
// if (ulNode.css("display")=="none") {
// ulNode.css("display","block");
// }else
// {
// ulNode.css("display","none");
// }
//方法2
// if (ulNode.css("display")=="none") {
// ulNode.show();
// }else
// {
// ulNode.hide();
// }
//方法3
// ulNode.toggle(1000);
//方法4
// if (ulNode.css("display")=="none") {
// ulNode.slideDown(500);
// }else
// {
// ulNode.slideUp();
// }
//方法5
ulNode.slideToggle(1000);
}); $(".hmain").hover(function()
{
var ulNode =$(this).children("ul");
ulNode.slideDown();
},function()
{
var ulNode =$(this).children("ul");
ulNode.slideUp(); });
});
至此,就实现了一个简单的菜单效果。可作为日后正式网页设计时的参考或者部分重用。
day10—jQuery初步实践,关于菜单的更多相关文章
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- 一款效果精致的 jQuery 多层滑出菜单插件
想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...
- 转:jQuery弹出二级菜单
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
- jQuery水平下拉菜单实现
<!DOCTYPE html> <html> <head> <title>jQuery水平下拉菜单实现</title> ...
- 基于jQuery右下角旋转环状菜单代码
基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览 ...
- 【jQuery Demo】jQuery打造动态下滑菜单
作者:漫凯维奇 来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...
- 我收集到的最好的jQuery和CSS3导航菜单
jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
随机推荐
- Linux下修改时间及date使用
[root@host1 ~]# date #显示时间 2017年 06月 01日 星期四 17:02:59 CST 以指定格式显示时间: [root@host1 ~]# date +%Y%m%d 20 ...
- win10系统Mysql5.7服务启动报:"1053错误:服务没有及时响应启动或控制请求"
win10安装Mysql5.7: MySQL压缩包解压后,在目录下增加my.ini配置文件 [mysqld] port = basedir=D:\Mysql datadir=D:\Mysql\data ...
- poj-2289.jamies contact groups(二分答案 + 二分多重匹配)
Jamie's Contact Groups Time Limit: 7000MS Memory Limit: 65536K Total Submissions: 9227 Accepted: ...
- Linux下CMake简明教程
转载地址:https://blog.csdn.net/whahu1989/article/details/82078563 CMake是开源.跨平台的构建工具,可以让我们通过编写简单的配置文件去生成本 ...
- spring-security问题记录
一.错误信息 Could not decode JSON for additional information: BaseClientDetails 2019-12-03 22:18:37.239 W ...
- C# asp.net XML格式的字符串显示不全
前台显示XML字符串显示不全 后台XML字符串使用<xmp></xmp>将XML格式字符串括起来
- python基础面试题:(1)
1.以下用C语言开发的Python解释器是( ) A:python是Java语言开发的Python解析器,B:PyPy是使用Python语言开发的Python解析,C:IronPython是.net平 ...
- 时间选择器moment格式化存在时差问题
时间选择器moment格式化存在时差问题解决方法: return moment(date).utc().zone(+6).format('YYYY-MM-DD')解决IE9时间选择器不能回显数据解决方 ...
- Read-Only Tables 只读表
Put a table into read-only mode,which prevents DDL or DML changes during table maintenance Put the ...
- rabbit例子
https://blog.csdn.net/csm201314/article/details/76377214 #include <SimpleAmqpClient/SimpleAmqpCli ...