横向纵向菜单

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > 横向纵向菜单 </ title >

     < script  type ="text/javascript"  src ="jquery-1.4.1.js" ></ script >

     < style  type ="text/css" >
        .css_menu ul, li
         {
            list-style :  none ;
            padding :  0 ;
            margin :  0 ;   /* float: left;  启用此项则变成横向菜单  */
         }
        .css_menu_title
         {
            background-color :  Gray ;
            width :  120px ;
            margin :  1px ;
         }
        .css_menu_title ul
         {
            background-color :  Silver ;
            display :  none ;
            width :  100% ;
         }
        .css_menu_title ul li
         {
            display :  block ;
            width :  100% ;
         }
        .css_menu a
         {
            text-decoration :  none ;
            text-align :  center ;
            display :  block ;
            width :  100% ;
         }
        .css_menu_title a
         {
            color :  White ;
         }
        .css_menu_title li a
         {
            color :  Black ;
            display :  block ;
            width :  100% ;
         }
     </ style >

     < script  type ="text/javascript" >
        $( function () {

            $( " .css_menu_title > a " ).click( function () {
                 // 主菜单项对应的子菜单项
                 var  ulNode  =  $( this ).next( " ul " );
                 //                 if (ulNode.css("display") == "none") {
                 //                     ulNode.show("slow");
                 //                 }
                 //                 else {
                 //                     ulNode.hide("slow");
                 //                 }
                ulNode.slideToggle();
            });
        });
     </ script >
</ head >
< body >
     < div  class ="css_menu" >
         < ul >
             < li  class ="css_menu_title" >< a  href ="#" > 菜单项1  </ a >
                 < ul >
                     < li >< a  href ="#" > 子菜单项1-1 </ a ></ li >
                     < li >< a  href ="#" > 子菜单项1-2 </ a ></ li >
                 </ ul >
             </ li >
             < li  class ="css_menu_title" >< a  href ="#" > 菜单项2 </ a >
                 < ul >
                     < li >< a  href ="#" > 子菜单项2-1 </ a ></ li >
                     < li >< a  href ="#" > 子菜单项2-2 </ a ></ li >
                 </ ul >
             </ li >
             < li  class ="css_menu_title" >< a  href ="#" > 菜单项3 </ a >
                 < ul >
                     < li >< a  href ="#" > 子菜单项3-1 </ a ></ li >
                     < li >< a  href ="#" > 子菜单项3-2 </ a ></ li >
                 </ ul >
             </ li >
         </ ul >
     </ div >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/xyjblog/archive/2010/02/18/1669154.html