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响应 ...
随机推荐
- 使用hash表进行数组去重
哈希表(Hash table,也叫散列表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个映射函数叫做散列 ...
- Ubuntu14 vsftp 的安装和虚拟用户配置
一.介绍 FTP 是 File Transfer Protocol (文件传输协议)的缩写 ,在 Unix/Linux 系统中常用的免费 FTP 服务器软件主要是 VSFTP,vsftp的官方地址:h ...
- asp.net core2.1认证和授权解密
来源:https://www.cnblogs.com/pangjianxin/p/9372562.html asp.net core2.1认证和授权解密 本篇文章翻译自:https://digital ...
- WPF的DataTrigger使用
首先创建一个空的项目 然后看看前台写的代码,如下图所示 <Grid> <StackPanel HorizontalAlignment="Center" Verti ...
- Git：将本地项目连接到远程（github、gitee、gitlab）仓库流程
当进行协同开发或者为了代码安全备份需要,一般都会将本地代码和远程仓库相连接. 备注:Github.Gitee.Gitlab是三个常用的远程git仓库,操作流程基本一致. 提前环境要求: 1.node. ...
- vue项目中使用高德地图（根据坐标定位点）
前言 项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码 正文 <script> var map,marker; export default { data(){ retu ...
- MyBatis联表查询——别名方式
在使用MyBatis你想工程时,单表操作其实是非常完美的,涉及到多表联合查询时,需要我们自己写联表的SQL语句. 我拿出项目中的部分代码作为示例, EmployeeMapper.xml: <?x ...
- SIGINT、SIGQUIT、 SIGTERM、SIGSTOP区别
2) SIGINT程序终止(interrupt)信号, 在用户键入INTR字符(通常是Ctrl-C)时发出,用于通知前台进程组终止进程. 3) SIGQUIT和SIGINT类似, 但由QUIT字符(通 ...
- linux安装 inotify
[root@rsync-client-inotify ~]# yum install make gcc gcc-c++ [root@rsync-client-inotify ~]# wget http ...
- 卷积神经网络 CNN 系列模型阐述
http://www.sohu.com/a/134347664_642762 Lenet,1986年 https://github.com/BVLC/caffe/blob/master/example ...