网页左侧边栏二级菜单的学习

作者：雅婷婉君323 | 来源：互联网 | 2023-05-19 08:40

1.二级菜单手风琴垂直菜单，网上很多（未改），设计上拉下拉来实现资源地址：http:download.csdn.netdetailluzhiweistudy98289781

1.二级菜单

手风琴垂直菜单，网上很多（未改），设计上拉下拉来实现
资源地址：http://download.csdn.net/detail/luzhiweistudy/9828978

1. index.html


<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3垂直手风琴折叠菜单DEMO演示title>
  <meta name="viewport" content=">
    
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

head>

<body>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/Javascript">script>
<script src="/follow.js" type="text/Javascript">script>
div>
    
    <ul id="accordion" class="accordion">
        <li>
            <div class="link"><i class="fa fa-paint-brush">i>Diseño web<i class="fa fa-chevron-down">i>div>
            <ul class="submenu">
                <li><a href="#">Photoshopa>li>
                <li><a href="#">HTMLa>li>
                <li><a href="#">CSSa>li>
                <li><a href="#">Maquetacion weba>li>
            ul>
        li>
        <li>
            <div class="link"><i class="fa fa-code">i>Desarrollo front-end<i class="fa fa-chevron-down">i>div>
            <ul class="submenu">
                <li><a href="#">Javascripta>li>
                <li><a href="#">jQuerya>li>
                <li><a href="#">Frameworks Javascripta>li>
            ul>
        li>
        <li>
            <div class="link"><i class="fa fa-mobile">i>Diseño responsive<i class="fa fa-chevron-down">i>div>
            <ul class="submenu">
                <li><a href="#">Tabletsa>li>
                <li><a href="#">Dispositivos mobilesa>li>
                <li><a href="#">Medios de escritorioa>li>
                <li><a href="#">Otros dispositivosa>li>
            ul>
        li>
        <li><div class="link"><i class="fa fa-globe">i>Posicionamiento web<i class="fa fa-chevron-down">i>div>
            <ul class="submenu">
                <li><a href="#">Googlea>li>
                <li><a href="#">Binga>li>
                <li><a href="#">Yahooa>li>
                <li><a href="#">Otros buscadoresa>li>
            ul>
        li>
    ul>

  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'>script>

  <script src="js/index.js">script>

body>

html>

2. style.css

* {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

body {
 background: #2d2c41;
 font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}

ul {
 list-style-type: none;
}

a {
 color: #b63b4d;
 text-decoration: none;
}

/** =======================
 * Contenedor Principal
 ===========================*/
h1 {
 color: #FFF;
 font-size: 24px;
 font-weight: 400;
 text-align: center;
 margin-top: 80px;
 }

h1 a {
 color: #c12c42;
 font-size: 16px;
 }

 .accordion {
 width: 100%;
 max-width: 360px;
 margin: 30px auto 20px;
 background: #FFF;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 }

.accordion .link {
 cursor: pointer;
 display: block;
 padding: 15px 15px 15px 42px;
 color: #4D4D4D;
 font-size: 14px;
 font-weight: 700;
 border-bottom: 1px solid #CCC;
 position: relative;
 -webkit-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
}

.accordion li:last-child .link {
 border-bottom: 0;
}

.accordion li i {
 position: absolute;
 top: 16px;
 left: 12px;
 font-size: 18px;
 color: #595959;
 -webkit-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
 right: 12px;
 left: auto;
 font-size: 16px;
}

.accordion li.open .link {
 color: #b63b4d;
}

.accordion li.open i {
 color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
 -webkit-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/
 .submenu {
 display: none;
 background: #444359;
 font-size: 14px;
 }

 .submenu li {
 border-bottom: 1px solid #4b4a5e;
 }

 .submenu a {
 display: block;
 text-decoration: none;
 color: #d9d9d9;
 padding: 12px;
 padding-left: 42px;
 -webkit-transition: all 0.25s ease;
 -o-transition: all 0.25s ease;
 transition: all 0.25s ease;
 }

 .submenu a:hover {
 background: #b63b4d;
 color: #FFF;
 }

3. index.js

$(function() {
    var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        var links = this.el.find('.link');
        // Evento
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
    }

    Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
            $this = $(this),
            $next = $this.next();

        $next.slideToggle();
        $this.parent().toggleClass('open');

        if (!e.data.multiple) {
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        };
    }   

    var accordion = new Accordion($('#accordion'), false);
});

推荐阅读

utf-8
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16
go
Python 数据可视化实战指南

本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ... [详细]

蜡笔小新 2024-11-13 06:03:30
go
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
version
php更新数据库字段的函数是,php更新数据库字段的函数是

php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]

蜡笔小新 2024-11-12 11:37:31
utf-8
jQuery 入门指南与实战应用

本文详细介绍了 jQuery 的入门知识与实战应用，首先讲解了如何引入 jQuery 库及入口函数的使用方法，为初学者提供了清晰的操作指南。此外，还深入探讨了 jQuery 在实际项目中的多种应用场景，包括 DOM 操作、事件处理和 AJAX 请求等，帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]

蜡笔小新 2024-11-04 17:28:16
go
用阿里云的免费 SSL 证书让网站从 HTTP 换成 HTTPS

HTTP协议是不加密传输数据的，也就是用户跟你的网站之间传递数据有可能在途中被截获，破解传递的真实内容，所以使用不加密的HTTP的网站是不 ... [详细]

蜡笔小新 2024-11-13 14:02:50
import
Spring – Bean Life Cycle

Spring – Bean Life Cycle ... [详细]

蜡笔小新 2024-11-13 13:24:40
utf-8
深入解析HTML5字符集属性：charset与defaultCharset

本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset，帮助开发者更好地理解和应用这些属性，以确保网页在不同环境下的正确显示。 ... [详细]

蜡笔小新 2024-11-13 11:09:46
utf-8
使用jqTransform插件美化表单

jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件，专用于美化表单元素，操作简便，能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ... [详细]

蜡笔小新 2024-11-12 22:29:28
string
oracle c3p0 dword 60,web_day10 dbcp c3p0 dbutils

createdatabasemydbcharactersetutf8;alertdatabasemydbcharactersetutf8;1.自定义连接池为了不去经常创建连接和释放 ... [详细]

蜡笔小新 2024-11-12 19:26:15
string
最详尽的4K技术科普

什么是4K？4K是一个分辨率的范畴，即40962160的像素分辨率，一般用于专业设备居多，目前家庭用的设备，如 ... [详细]

蜡笔小新 2024-11-12 18:25:39
string
CSS Transition 属性实现平滑动画效果

通过 CSS 中的 transition 属性，可以轻松实现元素状态变化时的平滑过渡效果。本文将详细介绍如何使用 transition 属性，并提供一个具体的示例。 ... [详细]

蜡笔小新 2024-11-12 17:18:11
go
window下的python安装插件

window下的python安装插件,Go语言社区,Golang程序员人脉社 ... [详细]

蜡笔小新 2024-11-12 15:14:05
import
Spring详解（六）AOP

原文网址：https:www.cnblogs.comysoceanp7476379.html目录1、AOP什么？2、需求3、解决办法1:使用静态代理4 ... [详细]

蜡笔小新 2024-11-12 14:40:40
version
开机自启动的几种方式

0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录，这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]

蜡笔小新 2024-11-12 11:16:30

雅婷婉君323

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章