CSS Плавающее расширяемое меню для отображения содержимого

Пожалуйста, любезно передайте мне, как я noob. Я создал страницу в html, но теперь мне нужно сделать то, что, как я думаю, html не может сделать. С левой стороны я ищу создать плавающее меню, которое расширяется. Это будет вертикально. Когда вы нажмете на 1-й вариант, он будет расширяться с инструкциями, а затем вы можете закрыть его. Тогда можно спуститься до четвертого. В то же время в центре будет основная html-карта (которая уже выполнена), где они могут попробовать, что находится в инструкциях. Я ПОЛНОСТЬЮ новичок в CSS. Я нашел нечто похожее на то, что хочу, но не совсем.CSS Плавающее расширяемое меню для отображения содержимого

<style> 
    body { 
     margin: 0; 
    } 

    ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 15%; 
background-color: #f1f1f1; 
position: fixed; 
height: 50%; 
overflow: auto; 
    } 

    li a { 
display: inline; 
color: #000; 
padding: 8px 0 8px 16px; 
text-decoration: none; 
    } 

    li a.active { 
background-color: #4CAF50; 
color: white; 
    } 

    li a:hover:not(.active) { 
background-color: #555; 
color: white; 
    } 
    </style> 

    <body> 

    <ul> 
     <li><a class="active" href="home.htm">Home</a></li> 
     <li><a href="#one.htm">One</a></li> 
     <li><a href="#two.htm">TWo</a></li> 
     <li><a href="#Three.htm">Three</a></li> 
    </ul> 

    <div style="margin-left:15%;padding:1px 16px;height:1000px;"> 
    <img src="image.png" width="1200" height="900" usemap="#map" /> 

    <map name="map"> 

    </map> 
    </div> 

    </body>

Возможно, я полностью отключился от этого. Я начинаю изучать CSS, чтобы понять это больше. Все предложения были бы замечательными. Заранее спасибо.

источник

2015-12-22 user2022089

Я думаю, что вы ищите это меню аккордеона.

Если вы хотите использовать чистый CSS, вам нужно использовать CSS-переходы. Сделал быстрый поиск Google и нашел простой пример: http://bradsknutson.com/blog/css-only-accordion/

Если вы не возражаете, используя немного JavaScript, то JQuery UI имеет быстрый и простой в использовании меню аккордеон, вы можете выбрать различные варианты (например, сортировкой меню и т.д). Возможно, вам придется изучить основы установки jQuery, если вы раньше не использовали пользовательский интерфейс jQuery. https://jqueryui.com/accordion/#sortable

источник

2015-12-22 20:14:07

Похоже, что я изучаю CSS. Благодаря! – user2022089

CSS Плавающее расширяемое меню для отображения содержимого

ответ

Смежные вопросы