Замена вида checkbox /Второй уровень подменю /Анимация

@JohnAlterat · Регистрация: 23.12.2013

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

Доброго времени суток. Накопилось три вопроса, ответы которые, собственными, пока еще малыми, знаниями не могу найти.

1. Checkbox. Необходимо заменить внешний вид на другой при этом сохраняя функционал. Перепробовал разные варианты и безуспешно. Так же, пытался разобраться в предложенной ссылке на форуме (ryanfait styling) но, видимо, где то упускаю важные моменты.

2. Имеется меню, в котором несколько подкатегорий (как показано ниже). Пытался отдельно задать стиль отображения sub_menu, безуспешно.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<ul class="menu">
            <li><a href="#">HOME</a>
                <ul>
                    <li><a href="#">MAIN PAGE - LAYUOT 1</a></li>
                    <li><a href="#">MAIN PAGE - LAYUOT 2</a></li>
                    <li><a href="#">MAIN PAGE - LAYUOT 3</a>
                        <ul class="sub_menu">
                            <li><a href="#">MAIN PAGE - LAYUOT 1</a></li>
                            <li><a href="#">MAIN PAGE - LAYUOT 2</a></li>
                            <li><a href="#">MAIN PAGE - LAYUOT 3</a></li>
                            <li><a href="#">MAIN PAGE - LAYUOT 4</a></li>
                            <li><a href="#">MAIN PAGE - LAYUOT 5</a></li>
                            <li><a href="#">MAIN PAGE - LAYUOT 6</a></li>
 
                        </ul>
                    </li>
                    <li><a href="#">MAIN PAGE - LAYUOT 4</a></li>
                    <li><a href="#">MAIN PAGE - LAYUOT 5</a></li>
                    <li><a href="#">MAIN PAGE - LAYUOT 6</a></li>
                </ul>
            </li>
            <li><a href="#">FEATURES</a></li>
            <li><a href="#">SHORTCODES</a></li>
            <li><a href="#">PAGES</a>
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li><a href="#">PORTFOLIO</a>
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li><a href="#">BLOG</a></li>
        </ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.menu{
    position: relative;
    margin-left: 610px;
    padding-top: 52px;
}
 
 .menu li{
    display: inline-block;
    text-decoration-line: none;
 
}
 
.menu li a{
    font-family: Oswald;
    font-size: 16px;
    text-decoration: none;
    padding: 7px 20px;
    color: #565656;
}
 
.menu li :hover {
    color: #ff0000;
}
 
.menu li ul{
    display: none;
    width: 179px;
    position: absolute;
}
 
.menu ul .sub_menu{
    display: none;
    margin-left: 140px;
    margin-top: -15px;
}
 
.menu li:hover ul{
    display: block;
}

3. Есть иконка поиска, при нажатии на которую "выезжает" рядом с ней сама строка. Её скрытие и появление по клику на иконку получилось сделать. С анимацией же - беда. Javascrip еще тяжело дается, точнее будет сказать "дебри". HTML не предоставил ибо не знаю, нужен ли он вообще, в данном случае.

Буду очень благодарен, Вам, за помощь.

@JohnAlterat · 26.09.2014, 15:29 **[ТС]**

Забыл дописать еще один пункт. Можно ли отключить выделение границ элементов в Firefox при нажатии на них или других манипуляциях.

@ludmila-sv · 26.09.2014, 21:30

Отключение обводки ссылок:

CSS
1
a:focus {outline: none;}

Добавлено через 9 минут

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

3. Есть иконка поиска, при нажатии на которую "выезжает" рядом с ней сама строка. Её скрытие и появление по клику на иконку получилось сделать. С анимацией же - беда. Javascrip еще тяжело дается, точнее будет сказать "дебри". HTML не предоставил ибо не знаю, нужен ли он вообще, в данном случае.

Либо использовать библиотеку jquery и функцию animate
вот тут и примеры есть http://jquery.page2page.ru/ind... 0%B8%D0%B8

либо css свойство transition

Добавлено через 12 минут

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

2. Имеется меню, в котором несколько подкатегорий (как показано ниже). Пытался отдельно задать стиль отображения sub_menu, безуспешно.

Вот такое добавьте

CSS
1
2
3
4
5
6
.menu li:hover ul.sub_menu{
    display: none;
}
.menu li ul li:hover ul.sub_menu{
    display: block;
}

По крайней мере, будет правильно показываться/скрываться.
sub_menu еще б подвинуть немного, а то оно как-то далеко висит. Но это, я думаю, Вы сами сделаете.

@JohnAlterat · 26.09.2014, 22:19 **[ТС]**

ludmila-sv, Спасибо, решение второй проблемы помогло. sub_menu вправду чутка стоит подвинуть

.
А вот с функцией буду разбираться.

@ludmila-sv · 27.09.2014, 17:45

Про чекбоксы забыла написать.
1) есть вот такое - http://htmlbook.ru/blog/stilny... dlya-vsekh
2) но мне больше нравится следующее:

HTML5
1
2
<input type='checkbox' id='1' name='checkbox'>
 <label for='1'></label>

Используем label - клик по label равносилен клику по чекбоксу

Сам чекбокс скрываем:

CSS
1
input[type=checkbox]  {display:none;}

А для label задаем фоновую картинку

CSS
1
2
3
input[type=checkbox] + label  {background:url(...); width: 30px; height: 30px;}
 
input[type=checkbox] :checked + label  {background:url(...) ;}

@JohnAlterat · 29.09.2014, 15:33 **[ТС]**

ludmila-sv, по поводу второго вопроса. При клике на checkbox ничего не происходит. Попробовал вариант из статьи - тоже самое.

@ludmila-sv · 29.09.2014, 15:47

Работает: http://jsfiddle.net/0yn7kaso/
Надо было display: block добавить.

@JohnAlterat · 29.09.2014, 16:15 **[ТС]**

ludmila-sv, спасибо, теперь работает. Есть способ обнулять checkbox? Что бы он при повторном клике возвращал предыдущий вид.

@ludmila-sv · 29.09.2014, 16:17

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

Есть способ обнулять checkbox?

Ну да - просто кликайте по нему повторно. В моем примере он то красный, то синий. Можете убрать input[type=checkbox] {display:none;} - увидите, что при клике на красный/синий квадратик меняется состояние чекбокса.

@JohnAlterat · 29.09.2014, 16:22 **[ТС]**

ludmila-sv, это да. Спросил ибо в хроме, почему, толи зависает это действие, толи еще что то. Через раз срабатывает. Еще один момент. При обновлении страницы, действие с checkbox-ом сохраняется. Должно же обнуляться, я правильно понимаю?

@JohnAlterat · 30.09.2014, 19:54 **[ТС]**

ludmila-sv, подскажите пожалуйста. Вот искомый скрипт http://jsfiddle.net/92HXT/15/ . Как я понял он работает именно с выставленными параметрами билдов jquery и jquery ui. Могли бы Вы подсказать, что именно нужно подключить ибо в сборке jquery ui множество файлов, отвечающих за разные функции и это вызвало у меня некое замешательство

.
Или же есть альтернативные варианты?

@ludmila-sv · 30.09.2014, 20:57

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

Должно же обнуляться, я правильно понимаю?

Не,браузер запоминает, что Вы выбирали.
***
Насколько я помню, на сайте jquery ui есть песочница - там можно пробовать, что будет, если подключить те или иные элементы. Но я в своё время этим заморачиваться не стала и скачала оттуда что-то очень большое, но зато на все случаи жизни.
Вам нужен эффект slide. Попробуйте скачать то, что относится к нему. Но точно перечислить, какие именно элементы скачивать, я не могу, увы.

@JohnAlterat · 30.09.2014, 22:12 **[ТС]**

ludmila-sv, понял, спасибо. Продолжу разбираться.

@JohnAlterat · 02.10.2014, 20:06 **[ТС]**

Нашел решение вопроса №3. Надеюсь, кому то поможет. Дивы заменяем на необходимые и вуаля - всё работает. Можно записать в сокращенном варианте, но у меня, почему то, это не срабатывало.

JavaScript
1
2
3
4
5
6
                $("#img").click(function () {
                    var effect = 'slide';
                    var options = { direction: 'right' };
                    var duration = 700;
                    $('#search').toggle(effect, options, duration);
                });

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	26.09.2014, 15:29 [ТС]
	Забыл дописать еще один пункт. Можно ли отключить выделение границ элементов в Firefox при нажатии на них или других манипуляциях. Миниатюры 0

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	26.09.2014, 22:19 [ТС]
	ludmila-sv, Спасибо, решение второй проблемы помогло. sub_menu вправду чутка стоит подвинуть . А вот с функцией буду разбираться. 0

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	29.09.2014, 15:33 [ТС]
	ludmila-sv, по поводу второго вопроса. При клике на checkbox ничего не происходит. Попробовал вариант из статьи - тоже самое. 0

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	29.09.2014, 15:47
	Работает: http://jsfiddle.net/0yn7kaso/ Надо было display: block добавить. 0

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	29.09.2014, 16:15 [ТС]
	ludmila-sv, спасибо, теперь работает. Есть способ обнулять checkbox? Что бы он при повторном клике возвращал предыдущий вид. 0

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	29.09.2014, 16:22 [ТС]
	ludmila-sv, это да. Спросил ибо в хроме, почему, толи зависает это действие, толи еще что то. Через раз срабатывает. Еще один момент. При обновлении страницы, действие с checkbox-ом сохраняется. Должно же обнуляться, я правильно понимаю? 0

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	30.09.2014, 19:54 [ТС]
	ludmila-sv, подскажите пожалуйста. Вот искомый скрипт http://jsfiddle.net/92HXT/15/ . Как я понял он работает именно с выставленными параметрами билдов jquery и jquery ui. Могли бы Вы подсказать, что именно нужно подключить ибо в сборке jquery ui множество файлов, отвечающих за разные функции и это вызвало у меня некое замешательство . Или же есть альтернативные варианты? 0

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	30.09.2014, 22:12 [ТС]
	ludmila-sv, понял, спасибо. Продолжу разбираться. 0