КСС3 без яваскрипт-(баг аккордеона,имеется код)

@one_shot_please · Регистрация: 27.08.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте,может кто помочь с проблемой:имеется аккордеон,сделанный на css3,при нажатии на кнопку -экран перелистывается до самой кнопки.Пробывал искать в чем проблема..-не нашел..Если как-либо пытаюсь удалить якорь(к примеру:#one),-перестает работать..
HTML:

<div class="fl">

<ul class="accordion">

<li id="one" class="files">

<a href="#one">My Files495</a>

<ul class="sub-menu">

<li><a href="#one">01Dropbox42</a></li>

<li><a href="#one">02Skydrive87</a></li>

<li><a href="#one">03FTP Server366</a></li>

</ul>

</li>

<li id="two" class="mail">

<a href="#two">Mail26</a>

<ul class="sub-menu">

<li><a href="#two">01Hotmail9</a></li>

<li><a href="#two">02Yahoo14</a></li>

<li><a href="#two">03Gmail3</a></li>

</ul>

</li>

<li id="three" class="cloud">

<a href="#three">Cloud58</a>

<ul class="sub-menu">

<li><a href="#three">01Connect12</a></li>

<li><a href="#three">02Profiles19</a></li>

<li><a href="#three">03Options27</a></li>

</ul>

</li>

<li id="four" class="sign">

<a href="#four">Sign Out</a>

<ul class="sub-menu">

<li><a href="#four">01Log Out</a></li>

<li><a href="#four">02Delete Account</a></li>

<li><a href="#four">03Freeze Account</a></li>

</ul>

</li>

</ul>

</div>

CSS :
.fl{width:300px;
}
.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
margin: 0;
padding: 0;
border: none;
outline: none;
}

.accordion li {
list-style: none;
}

.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 40px;

color: #fdfdfd;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);

background: #194ce5;
background: -moz-linear-gradient(top, #2f2f30 0%, #1e1e1f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2f30), color-stop(100%,#1e1e1f));
background: -webkit-linear-gradient(top, #2f2f30 0%,#1e1e1f 100%);
background: -o-linear-gradient(top, #2f2f30 0%,#1e1e1f 100%);
background: -ms-linear-gradient(top, #2f2f30 0%,#1e1e1f 100%);
background: linear-gradient(top, #2f2f30 0%,#1e1e1f 100%);

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion li > a span {
display: block;
position: absolute;
top: 7px;
right: 0;
padding: 0 10px;
margin-right: 10px;

font: normal bold 12px/18px Arial, sans-serif;
background: #404247;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion > li > a:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 24px;
height: 24px;
margin: 4px 8px;

background-repeat: no-repeat;
background-image: url(../img/icons.png);
background-position: 0px 0px;
}

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before { background-position: -72px -24px; }
.sub-menu li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);

background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;

-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.sub-menu em {
position: absolute;
top: 0;
left: 0;
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif;
}

.accordion > li:hover > a,
.accordion > li:target > a {
color: #3e5706;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);

/*background: url(../img/active.png) repeat-x;*/
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}

.accordion > li:hover > a span,
.accordion > li:target > a span {
color: #fdfdfd;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #3e5706;
}

.sub-menu li:hover a { background: #efefef; }
.accordion li > .sub-menu {
height: 0;
overflow: hidden;

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.accordion li:target > .sub-menu {
height: 98px;
}

@kirill1059 · 09.10.2014, 13:30

Не по теме:

Пожалуста, выдилите ваш код. Читать не удобно:(

@Fedor92 · 09.10.2014, 15:52

Я бы вообще не рекомендовал аккордеоны на css - они жутко прыгают особенно, если на пункты меню быстро нажимать... Соответственно будет прыгать и контент на странице.. Задумайтесь!

@one_shot_please · 09.10.2014, 19:44 **[ТС]**

Друг, подскажи пожалуйста, как его выделить..?

@Fedor92 · 10.10.2014, 12:32

В каком смысле выделить? Мой совет лучше всего использовать аккордеоны на jquery поскольку там можно настроить анимацию хотя бы для плавного выдвижения меню...

@ludmila-sv · 10.10.2014, 18:23

Этот аккордеон и основан как раз на переходах к закладкам.
Можно попробовать переделать самую последнюю строчку css:
вместо

Сообщение от one_shot_please

.accordion li:target > .sub-menu {
height: 98px;
}

написать

CSS
1
.accordion li:hover > .sub-menu {height: 98px;}

и все якоря заменить на #.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@one_shot_please 0 / 0 / 0 Регистрация: 27.08.2014 Сообщений: 4

	КСС3 без яваскрипт-(баг аккордеона,имеется код) 09.10.2014, 01:25. Показов 1735. Ответов 5 Метки нет (Все метки) Здравствуйте,может кто помочь с проблемой:имеется аккордеон,сделанный на css3,при нажатии на кнопку -экран перелистывается до самой кнопки.Пробывал искать в чем проблема..-не нашел..Если как-либо пытаюсь удалить якорь(к примеру:#one),-перестает работать.. HTML: <div class="fl"> <ul class="accordion"> <li id="one" class="files"> <a href="#one">My Files<span>495</span></a> <ul class="sub-menu"> <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li> <li><a href="#one"><em>02</em>Skydrive<span>87</span></a></li> <li><a href="#one"><em>03</em>FTP Server<span>366</span></a></li> </ul> </li> <li id="two" class="mail"> <a href="#two">Mail<span>26</span></a> <ul class="sub-menu"> <li><a href="#two"><em>01</em>Hotmail<span>9</span></a></li> <li><a href="#two"><em>02</em>Yahoo<span>14</span></a></li> <li><a href="#two"><em>03</em>Gmail<span>3</span></a></li> </ul> </li> <li id="three" class="cloud"> <a href="#three">Cloud<span>58</span></a> <ul class="sub-menu"> <li><a href="#three"><em>01</em>Connect<span>12</span></a></li> <li><a href="#three"><em>02</em>Profiles<span>19</span></a></li> <li><a href="#three"><em>03</em>Options<span>27</span></a></li> </ul> </li> <li id="four" class="sign"> <a href="#four">Sign Out</a> <ul class="sub-menu"> <li><a href="#four"><em>01</em>Log Out</a></li> <li><a href="#four"><em>02</em>Delete Account</a></li> <li><a href="#four"><em>03</em>Freeze Account</a></li> </ul> </li> </ul> </div> CSS : .fl{width:300px; } .accordion, .accordion ul, .accordion li, .accordion a, .accordion span { margin: 0; padding: 0; border: none; outline: none; } .accordion li { list-style: none; } .accordion li > a { display: block; position: relative; min-width: 110px; padding: 0 10px 0 40px; color: #fdfdfd; font: bold 12px/32px Arial, sans-serif; text-decoration: none; text-shadow: 0px 1px 0px rgba(0,0,0, .35); background: #194ce5; background: -moz-linear-gradient(top, #2f2f30 0%, #1e1e1f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2f30), color-stop(100%,#1e1e1f)); background: -webkit-linear-gradient(top, #2f2f30 0%,#1e1e1f 100%); background: -o-linear-gradient(top, #2f2f30 0%,#1e1e1f 100%); background: -ms-linear-gradient(top, #2f2f30 0%,#1e1e1f 100%); background: linear-gradient(top, #2f2f30 0%,#1e1e1f 100%); -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); } .accordion li > a span { display: block; position: absolute; top: 7px; right: 0; padding: 0 10px; margin-right: 10px; font: normal bold 12px/18px Arial, sans-serif; background: #404247; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); } .accordion > li > a:before { position: absolute; top: 0; left: 0; content: ''; width: 24px; height: 24px; margin: 4px 8px; background-repeat: no-repeat; background-image: url(../img/icons.png); background-position: 0px 0px; } .accordion li.files > a:before { background-position: 0px 0px; } .accordion li.files:hover > a:before, .accordion li.files:target > a:before { background-position: 0px -24px; } .accordion li.mail > a:before { background-position: -24px 0px; } .accordion li.mail:hover > a:before, .accordion li.mail:target > a:before { background-position: -24px -24px; } .accordion li.cloud > a:before { background-position: -48px 0px; } .accordion li.cloud:hover > a:before, .accordion li.cloud:target > a:before { background-position: -48px -24px; } .accordion li.sign > a:before { background-position: -72px 0px; } .accordion li.sign:hover > a:before, .accordion li.sign:target > a:before { background-position: -72px -24px; } .sub-menu li a { color: #797979; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: #e5e5e5; border-bottom: 1px solid #c9c9c9; -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); } .sub-menu li:last-child a { border: none; } .sub-menu li > a span { color: #797979; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: transparent; border: 1px solid #c9c9c9; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .sub-menu em { position: absolute; top: 0; left: 0; margin-left: 14px; color: #a6a6a6; font: normal 10px/32px Arial, sans-serif; } .accordion > li:hover > a, .accordion > li:target > a { color: #3e5706; text-shadow: 1px 1px 1px rgba(255,255,255, .2); /background: url(../img/active.png) repeat-x;/ background: #a5cd4e; background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); } .accordion > li:hover > a span, .accordion > li:target > a span { color: #fdfdfd; text-shadow: 0px 1px 0px rgba(0,0,0, .35); background: #3e5706; } .sub-menu li:hover a { background: #efefef; } .accordion li > .sub-menu { height: 0; overflow: hidden; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .accordion li:target > .sub-menu { height: 98px; } 0

@kirill1059
	09.10.2014, 13:30
	Не по теме: Пожалуста, выдилите ваш код. Читать не удобно:( 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	09.10.2014, 15:52
	Сообщение было отмечено one_shot_please как решение Решение Я бы вообще не рекомендовал аккордеоны на css - они жутко прыгают особенно, если на пункты меню быстро нажимать... Соответственно будет прыгать и контент на странице.. Задумайтесь! 1

@one_shot_please 0 / 0 / 0 Регистрация: 27.08.2014 Сообщений: 4
	09.10.2014, 19:44 [ТС]
	Друг, подскажи пожалуйста, как его выделить..? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	10.10.2014, 12:32
	В каком смысле выделить? Мой совет лучше всего использовать аккордеоны на jquery поскольку там можно настроить анимацию хотя бы для плавного выдвижения меню... 0

КСС3 без яваскрипт-(баг аккордеона,имеется код)

Решение