Многоуровневое вертикальное меню css: javascript — Как сделать многоуровневое вертикальное меню accordion?

Leave a Comment / Css / By /

Pure CSS Vertical Menu with Submenus

< html lang = "en" >

 

< head >

   < title >Вертикальное меню на чистом CSS title > 90 006 90 009

7

< Meta Имя = "Viewport"

Содержание = "Ширина = ширина устройства, начальная масштаба = 1,0" />

< Ссылка REL = "StyleSheep"

HREF =

"https://unpkg. com/[email protected]/build/puild/puild/puild/puild/puild/puild/puild/puild/puild/puild/puild/puild/puild-m .css" >

< Стиль >

. Заголовок PURE-MENU {

Цвет: #308D46;

}

.Custom-Display {

/ *0008

       отображение: встроенный блок;

     }

   style >

head >

 

< body >

< div class = "Индивидуальное отображение чистого меню" >

     < ul class = "pure-menu-list" >

       < li class = "pure -Мену заголовок " >

Geeksforgeeks

LI >

LI >

0007 < LI Class = "Pure-Menu-item

Pure-Menu-Has-Children

Pure-Menu-Hover-Hover">

7

A HREF = "#"

Класс = "Pure-Menu-Link" >

Tutorials

         a >

         < ul class = "pure-menu-children" >

           < LI Класс = "Pure-Menu-item" >

< A href = "#"

                class = "pure-menu-link" >

               Data Structures and Algorithms

             A >

LI >

< LI class = "pure-menu-item" >

             < a href = "#"

                class = "Pure-Menu-Link" >

GATE 2022

A >

LI >

< LI Class = "Pure-Menu-item

Pure-Menu-child

Pure-Menu-child

Pure-Menu-Allow-Hover ">

< A HREF = "#" class = "pure-menu-link" >

               Practice

             a >

             < ul класс = "чистое меню-дети" >

               < li

7 класс0008

"Pure-Menu-item" >

< A HREF = "#"

Класс =

"Pace Ссылка " >

HTML

A >

li >

               < li class = "pure-menu-item" >

                 < a Href = "#"

Класс = "Pure-Menu-Link" >

CSS

                 a >

               li >

               < li class = " чистый-меню-элемент" >

                < a href = 0 "8" 0 0

                    class = "pure-menu-link" >

                   JavaScript

                 a >

               li >

            ul >

9        0008 li >

         ul >

       li >

 

       < li Class = "Pure-Menu-item

Pure-Menu-Has-Children

Pure-Menu-Hover-Hover">

         < a href = "#"

            class = "pure-menu-link" >

           Students

A >

< UL Класс = "pure-menu-children" >

           < li class = "pure-menu-item" >

             < a HREF = "#"

Класс = "Pure-Menu-Link" >

Competitive Programming

             a >

           li >

           < li class = " чистый-меню-элемент" >

            < a href = 0 "0"

                class = "pure-menu-link" >

               Geeks of the Month

             a >

           li >

           < li class = " 0008 >

             < a href = "#"

                class = "pure-menu-link" >

Курсы размещения

A >

LI >

           < li class = "pure-menu-item" >

             < a href = " #"

Класс = " Pure-Menu-Link " >

Стажировка

             a >

           li >

         ul >

       li >

< LI Class = "Pure-Menu-item

Pure-Menu-Has-Children

Pure-Menu-Allow Hover ">

< A = "#"

= "#"

= "#"

= "#" класс = "Pure-Menu-Link" >

Джобс

A > A > 0008

< UL Класс = "Чисто-мен-чистки" >

< LI . -Item " >

< A HREF = "#"

Класс = "Pure-Menu-Link" >

Подача заявки на задание

A >

7 >

7 >

< LI Класс = "Pure-Menu-item" >

< a href = "#"

                class = "pure-menu-link" >

               Post a Jobs

A >

LI >

UL >

LI >

< LI Класс = " LI . >

< A HREF = "#"

Класс = "Pure-Menu-Link" = "Pure-Menu-Link" .0008 >

           Courses

         a >

       li >

 

     ул >

   раздел >

> корпус

70008

 

html >

спросил

Изменено 9 лет, 10 месяцев назад

Просмотрено 4к раз

Я создаю веб-сайт Joomla с помощью созданного мной шаблона. На одной из страниц я хочу создать (в разделе контента) вертикальное меню, чтобы справа от него отображался интерактивный контент.

Я сделал один с пользовательским html, где я просто вставляю код html в модуль, а модуль в статью.

Мой код меню настроен следующим образом

 
<дел2>

, где div2 и 3 оба с плавающей запятой влево (div2 — это меню с шириной 30%, а div3 — содержимое с 70%). И я добавил javascript, так что когда я нажимаю на одно из меню, текст просто исчезает.

В основном я хочу это, но без таблиц: http://clinica.chip7.pt/servico_diagnostico_gratis.php

  • javascript
  • html
  • css
  • joomla меню

    3

  • 2

    Я сделал пример того, что я думаю, что вы ищете на основе вашего вопроса, трудно сказать.

    вот демо: http://jsfiddle.net/tATWE/1/

    HTML: 

     <дел>
    <дел>
         
    {Заголовок
<дел>
<дел>

{ Верхняя навигация

<дел>