一个客户需要开发这样的网站,左侧菜单是一个点击展开式菜单,默认是收缩的,点击后会展开带下拉子菜单的网站导航。当用户点击某个子菜单时,当前点击的菜单会变成红色。效果如下图:
建议使用插件的形式实现更简单!
功能要求:
- 一级菜单下面有多个子菜单;
- PC端点击目录的文章后目录树会自动关闭;
- PC端点击目录中的文章,设置一个颜色,用来区分当前正在阅读的文章;
以下是通过WORDPRESS程序来实现这样的功能,如果你在做网站时,也需要这样的功能的话,可以使用以下的代码。
PHP代码
<div class="sidebarleft"> <ul class="cd-accordion-menu animated"> <li class="children"> <input type="checkbox" name ="group-1" id="group-1" checked> <label for="group-1"> pyton教程</label> <ul> <?php $catidall=Array("31","32","33","34","35"); for ($i=0;$i<count($catidall);$i++) {?> <li class="cat-item cat-item-<?php echo $catidall[$i];?>"> <input type="checkbox" name ="sub-group-level-<?php echo $catidall[$i];?>" id="sub-group-level-<?php echo $catidall[$i];?>"> <label for="sub-group-level-<?php echo $catidall[$i];?>"><?php echo get_cat_name($catidall[$i])?></label> <?php $singleurl = get_permalink($post_id);?> <?php foreach((get_the_category()) as $category);?> <ul class="children"<?php if(is_single()&&$category->cat_ID==$catidall[$i]){?> style="display:block;"<?php }?>> <?php query_posts('cat='.$catidall[$i].'' . $mcatID. '&caller_get_posts=1&showposts=100&order=ASC'); ?> <?php while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"<?php if(get_permalink($post_id)==$singleurl){?> style="color:red"<?php }?>><?php the_title(); ?></a></li> <?php endwhile; wp_reset_query(); ?> </ul> </li> <?php } ?> </ul> </li> </ul> </div> <script src="<?php bloginfo('template_directory'); ?>/jquerysfq/js/jquery-2.1.1.min.js"></script> <script src="<?php bloginfo('template_directory'); ?>/jquerysfq/js/main.js"></script> JS文件(main.js) jQuery(document).ready(function(){ var accordionsMenu = $('.cd-accordion-menu'); if( accordionsMenu.length > 0 ) { accordionsMenu.each(function(){ var accordion = $(this); //detect change in the input[type="checkbox"] value accordion.on('change', 'input[type="checkbox"]', function(){ var checkbox = $(this); console.log(checkbox.prop('checked')); ( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300); }); }); } });
CSS代码
/* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { box-sizing: border-box; } ul,ol{list-style:none;} /* -------------------------------- Main Components -------------------------------- */ label { font-weight: 400;} .sidebarleft .children li{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .sidebarleft{padding-right:5px;overflow: hidden;font-size:14px;} ul,ol{padding:0;} .cat-item-none{display:none;} .cd-accordion-menu { width: 100%; padding:0; margin: 2em auto; } .cd-accordion-menu ul { /* by default hide all sub menus */ display: none; } .cd-accordion-menu li { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cd-accordion-menu input[type=checkbox] { /* hide native checkbox */ position: absolute; opacity: 0; } .cd-accordion-menu label, .cd-accordion-menu a { position: relative; display: block; background: #FAFAFA; color: #000000; font-size: 1em; } .no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover { background: #52565d; } .cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after { /* icons */ content: ''; display: inline-block; width: 16px; height: 16px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .cd-accordion-menu label { cursor: pointer; } .cd-accordion-menu label::before, .cd-accordion-menu label::after { background-image: url(../img/cd-icons.svg); background-repeat: no-repeat; } .cd-accordion-menu label::before { /* arrow icon */ left: 18px; background-position: 0 0; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .cd-accordion-menu label::after { /* folder icons */ left: 41px; background-position: -16px 0; } .cd-accordion-menu input[type=checkbox]:checked + label::before { /* rotate arrow */ -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .cd-accordion-menu input[type=checkbox]:checked + label::after { /* show open folder icon if item is checked */ background-position: -32px 0; } .cd-accordion-menu input[type=checkbox]:checked + label + ul, .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul { /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/ /* show children when item is checked */ display: block; } .cd-accordion-menu ul label/*, .cd-accordion-menu ul a */{ box-shadow: inset 0 -1px #ddd; padding-left: 67px; } .no-touch .cd-accordion-menu ul label:hover, .no-touch .cd-accordion-menu ul a:hover { background: #3c3f45; } .cd-accordion-menu > li:last-of-type > label, .cd-accordion-menu > li:last-of-type > a, .cd-accordion-menu > li > ul > li:last-of-type label, .cd-accordion-menu > li > ul > li:last-of-type a { box-shadow: none; } .cd-accordion-menu ul label::after, .cd-accordion-menu ul a::after { left: 44px; } .cd-accordion-menu ul ul label, .cd-accordion-menu ul ul a { padding-left: 50px; } .cd-accordion-menu ul ul label::before { left: 54px; } .cd-accordion-menu ul ul label::after, .cd-accordion-menu ul ul a::after { left: 77px; } .cd-accordion-menu ul ul ul label, .cd-accordion-menu ul ul ul a { padding-left: 118px; } .cd-accordion-menu ul ul ul label::before { left: 72px; } .cd-accordion-menu ul ul ul label::after, .cd-accordion-menu ul ul ul a::after { left: 95px; } .cd-accordion-menu label { padding: 10px 10px 10px 45px; font-size: 1em; } .cd-accordion-menu a { padding: 5px 10px 5px 45px; font-size: 1em; color:#444; background:url(/wp-content/uploads/2019/07/ico1.png) no-repeat 30px 50%; } .cd-accordion-menu label::before { left: 5px; } .cd-accordion-menu label::after { left: 26px; } .cd-accordion-menu ul label::before { left: 24px; } .cd-accordion-menu ul ul label::before { left: 72px; } .cd-accordion-menu ul ul label::after, .cd-accordion-menu ul ul a::after { left: 101px; } .cd-accordion-menu ul ul ul label, .cd-accordion-menu ul ul ul a { padding-left: 154px; } .cd-accordion-menu ul ul ul label::before { left: 96px; } .cd-accordion-menu ul ul ul label::after, .cd-accordion-menu ul ul ul a::after { left: 125px; } .cd-accordion-menu.animated label::before { /* this class is used if you're using jquery to animate the accordion */ -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }
使用插件方式
创立新的菜单
使用小工具插件,在文章页侧边栏 使用插件可以设置哪些页面显示小工具