ZIPJS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）.zip 446.52KB

uuplay0216

资源文件列表:

JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）.zip 大约有11个文件
  1. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/
  2. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/CSS-menu.html 2.75KB
  3. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/css/
  4. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/css/menu-x.css 1.91KB
  5. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/css/menu-y.css 1.89KB
  6. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/css/reset.css 1.95KB
  7. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/css/style.css 1.28KB
  8. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/js/
  9. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/js/jquery-3.5.1.js 280.89KB
  10. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/js/jquery.cookie.js 3.05KB
  11. JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）/menu.gif 380.13KB

资源介绍:

JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）。如题所述，这是一个可以通过前端页面的切换样式表改变菜单位置布局的一个案例。案例是非常时尚且实用的二级菜单。 --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、CSS+JS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 菜单（含二级菜单）</title> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/menu-y.css" rel="stylesheet" type="text/css" id="cssfile" /> <!-- 引入jQuery --> <script src="js/jquery-3.5.1.js" type="text/javascript"></script> <!-- 引入jQuery.cookie库 --> <script src="js/jquery.cookie.js" type="text/javascript"></script> </head> <body> <header> <logo>CSS可变换位置的菜单</logo> <ul id="skin" class="change_menu"> <li id="menu-x" class="menu-x ">横向</li> <li id="menu-y" class="menu-y selected">纵向</li> </ul> <div class="clearfix"></div> </header> <nav> <ul class="main_menu"> <li class="push_down">首页</li> <li class="push_down">笔记 <ul class="sub_menu"> <li><a href="###" >JS+CSS+HTML</a></li> <li><a href="###" >Python</a></li> <li><a href="###" >WordPress</a></li> <li><a href="###" >PhotoShop</a></li> <li><a href="###" >Icon</a></li> <li><a href="###" >UI Design</a></li> <li><a href="###" >PHP</a></li> <li><a href="###" >SEO</a></li> </ul> </li> <li class="push_down">作品 <ul class="sub_menu"> <li><a href="###" >Web Page</a></li> <li><a href="###" >Web Development</a></li> <li><a href="###" >Code Snippets</a></li> <li><a href="###" >ICON Design</a></li> <li><a href="###" >User Interface</a></li> <li><a href="###" >Picture design</a></li> <li><a href="###" >Enterprise VI System</a></li> </ul> </li> <li class="push_down">软件 <ul class="sub_menu"> <li><a href="###" >PhotoShop</a></li> <li><a href="###" >Screenshots Guest</a></li> <li><a href="###" >Easy Desktop</a></li> </ul> </li> <li class="push_down">团队</li> <li class="push_down">订单</li> </ul> </nav> </body> </html> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li =$("#skin li"); $li.click(function(){ switchSkin( this.id ); }); var cookie_skin = $.cookie( "MyCssSkin"); if (cookie_skin) { switchSkin( cookie_skin ); } }); function switchSkin(skinName){ //当前<li>元素选中 $("#"+skinName).addClass("selected").siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中 $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤 $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); } //]]> </script>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIP人体姿势识别yolo8预训练模型，内附完整Python运行代码，可直接运行，可用于图片或者视频的人体姿势识别31.33MB8月前
    ZIPgdal1111-192.zip46.47MB8月前
    ZIPgdal201.zip23.62MB8月前
    ZIPKeil的注册工具keygen25.48KB8月前
    ZIPCSS技巧专栏一日一例：19 -纯CSS实现超酷的水晶按钮特效.zip1.88KB8月前
    ZIPDifferential-Drive-Robot-main.zip882.41KB8月前
    ZIP基于MATLAB的交通标志识别（完美运行）258.16KB8月前
    ZIP基于MATLAB的火焰检测定位（完美运行）1.46MB8月前