Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 22.07.2019
Сообщений: 40

меню-аккордеон

21.10.2019, 23:04. Показов 367. Ответов 0
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте, есть код меню типа аккордеон. Как сделать, чтоб оно не схлопывалось при щелчке.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul id="nav">
                <li><a href="content/index 1.html" target="loadpost">Главная</a></li>
                <li><a href="#" class="sub" tabindex="1">Достопримечательности Лондона</a><img src="image/up.gif" alt="" />
                    <ul>
                        <li><a href="content/index 1.1.html" target="loadpost">Trafalgar square</a></li>
                        <li><a href="content/index 1.2.html" target="loadpost">Big-Ben</a></li>
                         <li><a href="content/index 1.3.html" target="loadpost">Westminster Abbey</a></li>
                         <li><a href="content/index 1.4.html" target="loadpost">London Eye</a></li>
                         <li><a href="content/index 1.5.html" target="loadpost">Tower of London</a></li>
                         <li><a href="content/index 1.6.html" target="loadpost"> Buckingham Palace</a></li>
                        <li><a href="content/index 1.7.html" target="loadpost"> Whitehall street</a></li>
                    </ul>
                </li>
                <li><a href="content/index 2.html" target="loadpost">Упражнения</a></li>
                <li><a href="content/index 3.html" target="loadpost">Словарь</a></li>
                <li><a href="content/index 4.html" target="loadpost">Тест</a></li>
                <li><a href="content/index 5.html" target="loadpost">Карта</a></li>
                <li><a href="content/index 6.html" target="loadpost">Об авторе</a></li>
            </ul>
CSS
#nav {
border: 3px solid #3e4547;
box-shadow: 2px 2px 8px #000000;
border-radius: 10px;
text-transform: uppercase;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#nav, #nav ul {
list-style: none;
padding: 0;
width: 200px;
text-transform: uppercase;
z-index: 1;
}
#nav ul {
position: relative;
z-index: -1;
border-width:1px;

}
#nav li {
position: relative;
z-index: 100;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
}
#nav ul li {
margin-top:-40px;

-moz-transition: 0.4s linear 0.4s;
-ms-transition: 0.4s linear 0.4s;
-o-transition: 0.4s linear 0.4s;
-webkit-transition: 0.4s linear 0.4s;
transition: 0.4s linear 0.4s;
}
#nav li a {

background-color:darkgrey;
color:#000;
display:block;
font-size:12px;
font-weight:normal;
line-height:28px;
outline:0;
padding-left:15px;
text-decoration:none;
border: 3 px solid
}

#nav li a + img {
cursorointer;
display:none;
height:28px;
left:0;
position:absolute;
top:0;
width:200px;
}
#nav li a img {
border-width:0px;
height:24px;
line-height:28px;
margin-right:8px;
vertical-align:middle;
width:24px;
}
#nav li a:hover {
background-color:coral;
}
#nav ul li a {
background-color: #eee;
border-bottom: 1px solid #ccc;
color: #000;
font-size: 14px;
line-height: 22px;
text-transform: uppercase;
}
#nav ul li a:hover {
background-color:#ddd;
color:#444;
}
#nav ul li a img {

border-width:0px;
height:16px;
line-height:22px;
margin-right:5px;
vertical-align:middle;
width:16px;
}
#nav ul li:nth-child(odd) a img {
background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
background:#bcbdc1;
outline:0;
}
#nav a:focus ~ ul li {
margin-top:0;

-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
display:block;
}
#nav a.sub:active {
background:#bcbdc1;
outline:0;
}
#nav a:active ~ ul li {
margin-top:0;
}
#nav ul:hover {
display:block;
}
#nav a {font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;
border: 1px solid #F4EEEE;
border-radius:10px; /*немного css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);}
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
21.10.2019, 23:04
Ответы с готовыми решениями:

Аккордеон меню
Приветствую всех. Есть меню аккордеон. Само по себе работает , но я например открыл пункт и открываю второй , первый в этот момент не...

Неполадки с меню Аккордеон
Не выскакивают аккардеоном пункты В чем проблема уже запутался. Поскажите, знающие люди. &lt;div class=&quot;akkordeon&quot;&gt; ...

Оптимизация вида новостей в меню-аккордеон
Захотелось сделать иерархию для страницы новостей. Нашелся подходящий аккордеон, но возникла проблема. Сам пример вот здесь: (на...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
21.10.2019, 23:04
Помогаю со студенческими работами здесь

Аккордеон-раздвижное меню, не правильно раздвигается
Доброго времени суток. Скажу сразу, я новичок, только начал изучать html/css. Суть проблемы: подменю(субменю) уезжает в сторону при...

Вставить аккордеон меню в html и подправить стили
Всем привет! такой вопрос: 1.Как убрать картинки. 2.Как сделать так,чтобы при увеличении масштаба меню не дублировались уголки. 3.И...

Аккордеон на CSS
Нужно сделать так, чтобы при нажатии на элемент(class=&quot;radio-text&quot;) , описание(class=&quot;accordion__text&quot;) возвращалась в исходное...

Не срабатывает аккордеон
Подскажите где ошибка, не срабатывает аккордеон &lt;!DOCTYPE html&gt; &lt;html lang=&quot;ru&quot;&gt; &lt;head&gt; &lt;link rel=&quot;stylesheet&quot;...

Простой аккордеон
Привет:) Можно без js сделать аккордеон на radio который при нажатие на него открывался, а если еще раз на него нажать закрывался. Просто...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru