zoukankan      html  css  js  c++  java
  • jQuery水平下拉菜单实现

    <!DOCTYPE html>
    <html>
       <head>
          <title>jQuery水平下拉菜单实现</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
          <!--[if lt IE 9]>
             <script src="bootstrap/js/html5shiv.js"></script>
             <script src="bootstrap/js/respond.min.js"></script>
          <![endif]-->
          <style type="text/css">
    .menus{border:1px solid red; float:left; margin-left:4px; background:red;}
    .menus a{display:block; 100px; text-align:center;}
    .menu{display:none;}
    a{cursor:pointer;text-decoration:none;}
    a:hover{background:white; text-decoration:none;}
    a:visited{text-decoration:none; color:black;}
     </style>
          <script>
          $(function(){
    $(".menu-title").click(function(){
    $(this).next().toggleClass();
    });
            });
          </script>
       </head>
       <body> 
          <div class="menus">
          <a class="menu-title">菜单项</a>
          <div class="menu">
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          </div>
          </div> 
          <div class="menus">
          <a class="menu-title">菜单项</a>
          <div class="menu">
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          </div>
          </div> 
          <div class="menus">
          <a class="menu-title">菜单项</a>
          <div class="menu">
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          </div>
          </div> 
          <div class="menus">
          <a class="menu-title">菜单项</a>
          <div class="menu">
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          <a href="#" class="menu-item">菜单列表</a>
          </div>
          </div>
       </body>
    </html>
















  • 相关阅读:
    IOS-多线程知识
    《shop》 --- 自定义工具类 分页功能
    navicat for mysql 显示中文乱码解决办法
    Linux -- 搭建php服务器环境小记
    在自己主机搭建svn服务器,在远程地址里搭建svn服务器
    $ThinkPhp学习,shop项目 小记
    php 个人博客 实战小记
    php:require 和 include 的区别 5.9日
    mysql的入门命令 ==留言本的思路==
    Access denied for user 'root'@'localhost' (using password: YES) 问题解决小记
  • 原文地址:https://www.cnblogs.com/Oraice/p/5000440.html
Copyright © 2011-2022 走看看