手机网站实现左边弹出导航菜单点击一级分类展开二级分类
下面介绍一下手机网站常见的左边弹出导航菜单,并且点击一级分类展开二级分类的功能实现方法。
HTML代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap"><<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"topmeau"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wap_menu hidden-md hidden-lg"</span>><<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"current-menu-item menu_lists active"</span>><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wap_menu1"</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"left"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"网站首页"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"toplink"</span>>网站首页<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" menu_lists"</span>><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wap_menu1"</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"left"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"关于我们"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?page_id=6055"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"toplink"</span>>关于我们<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" menu_lists"</span>><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wap_menu1"</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"left"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"产品中心"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=185"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"dropdown-toggle"</span> aria-haspopup<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"1"</span>>产品中心<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"right"</span>>+<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><br> <<span style="color: #000000; font-weight: bold;">ul</span> role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"menu"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" wap_menu2"</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" nav-sub-item"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"产品分类一"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=186"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"zilink"</span>>产品分类一<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" nav-sub-item"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"产品分类四"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=189"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"zilink"</span>>产品分类四<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" nav-sub-item"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"产品分类二"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=188"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"zilink"</span>>产品分类二<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>><br> <<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" menu_lists"</span>><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wap_menu1"</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"left"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"新闻中心"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=193"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"dropdown-toggle"</span> aria-haspopup<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"1"</span>>新闻中心<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"right"</span>>+<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><br> <<span style="color: #000000; font-weight: bold;">ul</span> role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"menu"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" wap_menu2"</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" nav-sub-item"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"公司新闻"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=197"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"zilink"</span>>公司新闻<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" nav-sub-item"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"常见问题"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=198"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"zilink"</span>>常见问题<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" nav-sub-item"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"行业动态"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=195"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"zilink"</span>>行业动态<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>><br> <<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" menu_lists"</span>><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wap_menu1"</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"left"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"成功案例"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=190"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"dropdown-toggle"</span> aria-haspopup<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"1"</span>>成功案例<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"right"</span>>+<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><br> <<span style="color: #000000; font-weight: bold;">ul</span> role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"menu"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" wap_menu2"</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" nav-sub-item"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"成功案例一"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=191"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"zilink"</span>>成功案例一<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" nav-sub-item"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"成功案例二"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?cat=192"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"zilink"</span>>成功案例二<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>><br> <<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" menu_lists"</span>><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wap_menu1"</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"left"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"在线留言"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?page_id=7330"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"toplink"</span>>在线留言<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #000000; font-weight: bold;">li</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">" menu_lists"</span>><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"wap_menu1"</span>><<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"left"</span>><<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"联系我们"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://127.0.0.1/wordpress/?page_id=6061"</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"toplink"</span>>联系我们<<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>><br> <<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>></div></div> |
JS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #006600; font-style: italic;">// 手机左边弹出导航</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".menu_icon,.navigation"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">click</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span> <span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".black_cloth"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">show</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".wap_menu"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"left"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"0"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">"body"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"left"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"250px"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">"body"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">css</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"overflow"</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">"hidden"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".wrap_footer"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><span style="color: #3366CC;">"left"</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">"250px"</span><span style="color: #009900;">}</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><br><br><span style="color: #006600; font-style: italic;">// 点击一级分类展开二级分类</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".wap_menu>li.menu_lists>.wap_menu1>p.right"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">click</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span> <span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>$<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span>.<span style="color: #660066;">siblings</span><span style="color: #009900;">(</span><span style="color: #3366CC;">".wap_menu2"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">css</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"display"</span><span style="color: #009900;">)</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">"block"</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">parents</span><span style="color: #009900;">(</span><span style="color: #3366CC;">".menu_lists"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">find</span><span style="color: #009900;">(</span><span style="color: #3366CC;">".wap_menu2"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">slideUp</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">html</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"+"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".wap_menu li.menu_lists .wap_menu1 p.right"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">html</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"+"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".wap_menu2"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">slideUp</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">html</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"-"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span>.<span style="color: #660066;">siblings</span><span style="color: #009900;">(</span><span style="color: #3366CC;">".wap_menu2"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">slideDown</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span></div></div> |
CSS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap">.wap_menu {width: 250px;position: fixed;top: 0px;left: -250px;height: 100%;text-align: left;z-index: 10000001;background: #9e845a;}<br> .wap_menu li.menu_tit {font-size: 18px;font-weight: bold;background: rgba(255, 255, 255, 0.3);position: relative;padding: 15px 10px;color: #fff;}<br> .wap_menu li.menu_tit span {font-size: 20px;position: absolute;top: 12px;right: 15px;border-bottom: none;z-index: 1000;}<br> .wap_menu li {margin-bottom: 2px;font-size: 14px;position: relative;}<br> .wap_menu li .wap_menu1 {line-height: 24px;font-size: 16px;text-transform: Uppercase;background: rgba(255, 255, 255, 0.1);position: relative;}<br> .wap_menu li p {padding: 10px 10px; margin-bottom:0;}<br> .wap_menu li .wap_menu1 a {display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-right: 25px;color: #ffffff;}<br> .wap_menu li .wap_menu1 p.left {float: none;}<br> .wap_menu li .wap_menu1 p.right {width: 15%;text-align: center;color: #fff;position: absolute;top: 0;right: 0;float: none;z-index: 1000;}<br> .wap_menu li .wap_menu2 {display: none;}<br> .wap_menu li .wap_menu2 a {display: block;background: none;color: rgba(255, 255, 255, 0.8);overflow: hidden;font-size: 14px;border-bottom: rgba(255, 255, 255, 0.1) solid 1px;padding: 10px;}<br> .wap_menu li .wap_menu2 a i {float: left;width: 4px;height: 4px;background-color: #fff;margin: 8px 10px 0 5px;}<br> .wap_menu li .wap_menu2 a span {float: left;width: 85%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}</div></div> |
由于网站搬家,部分链接失效,如无法下载,请联系站长!谢谢支持!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » 手机网站实现左边弹出导航菜单点击一级分类展开二级分类
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » 手机网站实现左边弹出导航菜单点击一级分类展开二级分类