转行学开发，代码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;

}
 
jQuery实现菜单动作：
$(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();

  });

});

至此，就实现了一个简单的菜单效果。可作为日后正式网页设计时的参考或者部分重用。

 
另：
*本人在写这段CSS样式时，误把.main,.hmain的 width: 100px;属性写到ul样式里，结果是在水平菜单中始终无法实现横排浮动。
 
此外，由于未设计菜单背景及图片，导致上述的菜单过于简陋（不美观）。
 
写完今天的记录，抓紧时间学习今天的课程，明天一大早又要出差了。。。
 

day10—jQuery初步实践，关于菜单的更多相关文章

  1. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  2. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  3. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  4. 转：jQuery弹出二级菜单

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  5. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  6. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  7. 【jQuery Demo】jQuery打造动态下滑菜单

    作者:漫凯维奇      来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...

  8. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  9. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

随机推荐

  1. 安装paramiko的方法

    打开cmd命令行 输入 cd /d C:\Python27\Scripts 输入 pip  install paramiko pip install pika -i https://pypi.doub ...

  2. mysql考试复习

    基础创建 字段自动编号auto_increment ( 单词补充:increment 定期的加薪; 增量; 增加) 考点 添加自增 alter table [表名] modify [字段(id)] i ...

  3. idea 创建java web项目ssm-gradle

    环境准备:jdk1.8+tomcat8+idea+gradle 1.创建项目SSM 使用gradle创建项目,按照提示如下   image.png 输入项目名称,组名   image.png   im ...

  4. Storm分布式集群搭建

    一.storm版本 选用storm0.9.6 二.本地模式 用于对storm业务逻辑的调试和测试,可以直接在本地运行. 三.分布式模式 生产环境,需要对应的zookeeper.nimbus.super ...

  5. [翻译]解释JavaScript中的类型转换

    原文地址:JavaScript type coercion explained 类型转换是将值从一种类型转换为另一种类型的过程(比如字符串转换为数值,对象转换为布尔值,等等).任何类型,无论是原始类型 ...

  6. java 中的引用类型

    GC基本原理 GC (Garbage Collection)的基本原理:将内存中不再被使用的对象进行回收,GC中用于回收的方法称为收集器,由于GC需要消耗一些资源和时间,Java在对对象的生命周期特征 ...

  7. 2-基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板

    基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板 综合图像处理硬件平台包括图像信号处理板2块,视频处理板1块,主控板1块,电源板1块,VPX背 ...

  8. ps:点阵格式图像

    我们所看到的图像,究竟是如何构成的呢?这就需要涉及到图像类型的概念. 电脑中的图像类型分为两大类,一类称为点阵图,一类称为矢量图. 点阵图顾名思义就是由点构成的,如同用马赛克去拼贴图案一样,每个马赛克 ...

  9. git & gerrit & shell

    g公司使用Gerrit改善评审流程. 比较麻烦.gerrit提交后会触发vertifyCI, 实施代码扫描. 这一堆过程, 打印出一堆信息, 都在log中, 所以处理log就需要自己写shell了. ...

  10. 在flask服务里面执行adb 安装命令

    今天讲的是我在flask服务里执行adb install 命令,被坑了一天 需求是我们的安卓打包机器和我们的自动化机器不是同一台,管理人也不一样,想让每次打包后能通知到我们的服务器,然后执行后续的操作 ...