Jquery unlimited cascade menu Case Study

When I saw the phpcms cascade menu, I thought it was quite interesting to write it. I just talked about the general steps, saving my mind.

The cascade menu is usually generated in the areaid () function of the/data/cache_model/content_form.class.php file. However, this is just a cache that is not found yet, so it is currently used as a test. (Let me know! Thank you very much)

In $ js of areaid (), add
Copy codeThe Code is as follows:
Function delChild (num)
{
$ ('# Load _ $ field select'). each (function (I, obj ){
If (obj. id> num)
$ ('#' + Obj. id). remove ();
})
}

In/load. php, modify elseif ($ field = 'aread' & $ value)
Copy codeThe Code is as follows:
$ Str =
'<Select id = "'. $ id .'"
Onchange = "delChild ('. $ id. '); $ (\'#'. $ value. '\'). val (this. value); this. disabled = false; area_load (this. value); "> <option
Value = "1"> '. $ LANG ['Please _ select'].' </option> ';

You can remove the effect of "cannot be changed after the selected region", and the redundant selection box will not be deleted when there is no lower-level place name.
In the traditional cascading menu, I personally think that the data transmission is relatively large and the association with the database seems poor, so I will not post code.

Method 2:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('. Menu li'). hover (function (){
$ (This). children ('ul '). show ();
$ (This). focus (). addClass ('focusa ')
}, Function (){
$ (This). children ('ul '). hide ();
$ (This). focus (). removeClass ('focusa ');
});
});
</Script>
<Style type = "text/css">
Ul {list-style: none; margin: 0; padding: 0 ;}
. Menu {height: 30px; line-height: 30px ;}
. Menu li {float: left; position: relative;}/* this level is navigation */
. Menu li a {display: block; height: 30px; line-height: 30px; padding: 0 20px ;}
. Menu li a: hover {color: #000; background: url (img/bg1.png );}
. Menu li a. more {background: url (img/there.png) no-repeat 130px center ;}
. Menu li ul {position: absolute; float: left; width: 150px; border: 1px solid #000; display: none;}/* this is the second menu */
. Menu li ul a {width: 110px ;}
. Menu li ul a: hover {background: url (img/bg1.png );}
. Menu li ul {top: 0; left: 150px;}/* starting from Level 3 menu, all sub-menus are relatively offset */
</Style>
<Ul class = "menu">
<Li> <a href = "#"> menu 1 </a>
<Ul class = "one">
<Li> <a href = "#"> menu 1 </a> </li>
<Li> <a href = "#"> menu 2 </a> </li>
<Li> <a href = "#"> menu 3 </a> </li>
<Li> <a href = "#"> menu 4 </a> </li>
<Li> <a href = "#" class = "more"> menu 5 </a>
<Ul class = "two">
<Li> <a href = "#"> menu 1 </a> </li>
<Li> <a href = "#"> menu 2 </a> </li>
<Li> <a href = "#"> menu 3 </a> </li>
<Li> <a href = "#"> menu 4 </a> </li>
<Li> <a href = "#" class = "more"> menu 5 </a>
<Ul class = "three">
<Li> <a href = "#"> menu 1 </a> </li>
<Li> <a href = "#"> menu 2 </a> </li>
<Li> <a href = "#"> menu 3 </a> </li>
<Li> <a href = "#"> menu 4 </a> </li>
<Li> <a href = "#" class = "more"> menu 5 </a>
<Ul class = "four">
<Li> <a href = "#"> menu 1 </a> </li>
<Li> <a href = "#"> menu 2 </a> </li>
<Li> <a href = "#"> menu 3 </a> </li>
<Li> <a href = "#"> menu 4 </a> </li>
<Li> <a href = "#"> menu 5 </a> </li>
</Ul>
</Li>
</Ul>
</Li>
</Ul>
</Li>
</Ul>
</Li>
<Li> <a href = "#"> menu 2 </a>
<Ul class = "one">
<Li> <a href = "#"> menu 1 </a> </li>
<Li> <a href = "#"> menu 2 </a> </li>
<Li> <a href = "#" class = "more"> menu 3 </a>
<Ul class = "two">
<Li> <a href = "#"> menu 1 </a> </li>
<Li> <a href = "#"> menu 2 </a> </li>
<Li> <a href = "#" class = "more"> menu 3 </a>
<Ul class = "three">
<Li> <a href = "#"> menu 1 </a> </li>
<Li> <a href = "#"> menu 2 </a> </li>
<Li> <a href = "#"> menu 3 </a> </li>
<Li> <a href = "#"> menu 4 </a> </li>
<Li> <a href = "#"> menu 5 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> menu 4 </a> </li>
</Ul>
</Li>
</Ul>
</Li>
<Li> <a href = "#"> menu 3 </a> </li>
<Li> <a href = "#"> menu 4 </a> </li>
<Li> <a href = "#"> menu 5 </a>
<Ul class = "one">
<Li> <a href = "#"> menu 1 </a> </li>
<Li> <a href = "#"> menu 2 </a> </li>
<Li> <a href = "#"> menu 3 </a> </li>
</Ul>
</Li>
</Ul>