Of Stack

jQuery+CSS Implementation Simple Switch Menu Example

  • 2021-07-06 09:55:16
  • OfStack

In this paper, an example is given to describe the method of simply switching menus by jQuery+CSS. Share it for your reference, as follows: 


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Untitled page </title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
     $(function(){
       toggleEvent(0);
       var mTitle = $(".menuTitle");
       mTitle.each(function(i){
        $(this).click(function(){
         toggleSlideEvent(i);
         $(this).css("border-bottom","1px #ccccff solid");
        });
       });
     });
     function toggleSlideEvent(i)
     {
      $("ul",".menu1").css("display","none");
      $("ul",".menu1").eq(i).slideDown();
      $(".menuTitle").each(function(){
        $(this).css("border-bottom","0px #ccccff solid");
      });
     }
     function toggleEvent(i)
     {
      $("ul",".menu1").css("display","none");
      $("ul",".menu1").eq(i).css("display","block");
      $(".menuTitle").eq(i).css("border-bottom","1px #ccccff solid");
     }
  </script>
  <style type="text/css">
    .menu1
    {
      border: 1px #CCCCFF solid;
      border-top: 0px;
      width: 160px;
    }
    .menuTitle
    {
      width: 100%;
      height: 26px;
      border-bottom: 0px #CCCCFF solid;
      border-top: 1px #CCCCFF solid;
      text-align: left;
      line-height: 26px;
      cursor: pointer;
    }
    ul
    {
      border: 0px #CCCCFF solid;
      width: 100%;
      margin-left: 0px;
      margin-top: 0px;
    }
    ul li
    {
      height: 36px;
      line-height:36px;
      border: 0px gray solid;
      margin-top: 0px;
      margin-left: 0px;
      padding-left:20px;
      list-style-type:none;
      /*background:url(images/Title.png);*/
    }
    ul li:hover
    {
      height: 36px;
      line-height:36px;
      border: 0px gray solid;
      margin-top: 0px;
      margin-left: 0px;
      padding-left:20px;
      list-style-type:none;
      /*background:url(images/Title.png);*/
      cursor:pointer;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div class="menu1">
    <div class="menuTitle">
      TITLE1</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
    <div class="menuTitle">
      TITLE2</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
    <div class="menuTitle">
      TITLE3</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
  </div>
  </form>
</body>
</html>

For more readers interested in jQuery related content, please check the topics of this site: "Summary of jQuery Extension Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Table (table) Operation Skills", "Summary of Ajax Usage in jquery", "Summary of jQuery Common Classic Special Effects", "Summary of jQuery Animation and Special Effects Usage" and "Summary of jquery Selector Usage"

I hope this article is helpful to everyone's jQuery programming.

Related articles: