Уроки по jQuery

**Castiel_777** · 13.11.2009 16:44

Здесь я буду писать разные коды и прикольные на мой взгляд фишки.
Думаю, что кому-то пригодится, если что-то непонятно - спрашивайте, подскажу!

Урок 1. Делаем выпадающее меню для КАТЕГОРИЙ wordpress!

В сети вы найдете кучу туториалов как сделать выпадающее меню для wordpress, но там речь это страницах. Ну а вот я расскажу как сделать выпадающие категории. Такого я не нашел. Вот решил сам нарисовать.
Поехали:
Что нам понадобится:
Плагин my-category-order, для того чтобы задать порядок сортировки как нам надо
Знания html, как делать ненумерованные списки
Немного css
Ну и эффект jQuery

HTML

<div id="navigation">
<menu>
<li><a href="<?php echo get_option('home'); ?>/" class="on">Главная</a></li>
<?php wp_list_categories('orderby=order&title_li='); ?>
</menu>
</div>

Первым элементом в меню будет главная странница.
потом идет список категорий функция wp_list_categories (для новых версий wordpress), сортировка согласно настройки плагина my-category-order, title_li= это чтобы не было заголовка категории.

Сделай стильное меню, при помощи CSS:

/*общий стиль блока меню*/

#navigation{
height: 27px;
background: #49B7D8;
margin: auto auto auto auto;
clear: both;
font-size: 18px;
}

/*стиль ссылок в меню*/

#navigation li a{
color: #fff;
display: block;
line-height: 27px;
padding: 0 10px;
}

#navigation li a:hover{
background: #07599d;
text-decoration: none;
}

/*стиль для элементов первого уровня, т.е. дочерних страниц*/
#navigation li{
list-style: none;
float: left;
}

/*стиль для элементов дочернего меню*/
#navigation li ul li{
float: none;
}

#navigation ul{
background: #49B7D8;
margin: 0; padding: 0;
position: absolute;
z-index: 10;
}

/*строка display:none прячет выпадающее меню*/

#navigation ul{
display: none;
background: #49B7D8;
margin: 0; padding: 0;
position: absolute;
z-index: 10;
}

/*подсветка активной категории*/

#navigation .current-cat{
background:#07599d;
color:3366CC;

}

обращаю внимание на последние строчки, здесь мы подсвечиваем активную категорию при помощи .current-cat

Теперь подключаем сам jquery, прописываем между <head> и </head>:

<script src="wp-includes/js/jquery/jquery.js" type="text/javascript"></script>

И для отображения подменю пишем:

<script type="text/javascript">
jQuery(document).ready(function(){

jQuery("#menu li").hover(

function(){
jQuery(this).find('ul').show();
},

function(){
jQuery(this).find('ul').hide();
}
);
});
</script>

Это все, но мы пойдем дальше сделаем эффект:

<script type="text/javascript">
jQuery(document).ready(function(){

jQuery("#menu li").hover(

function(){
jQuery(this).find('ul').slideDown();
},

function(){
jQuery(this).find('ul').slideUp();
}
);
});
</script>

Пока все, смотрим пример здесь

**mall** · 13.11.2009 17:18

Здесь я буду писать разные коды и прикольные на мой взгляд фишки.

вот клован, статья - полный копипаст от сюда

**Castiel_777** · 13.11.2009 17:54

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

вот клован, статья - полный копипаст от сюда

Ладно буду писать только отсебятину!

**karbid** · 13.11.2009 18:25

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

Ладно буду писать только отсебятину!

Копипастить статьи известных авторов да ещё и без иллюстраций - это офигеть как несерьезно...

**Castiel_777** · 13.11.2009 18:51

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

Копипастить статьи известных авторов да ещё и без иллюстраций - это офигеть как несерьезно...

Ну где тут копипаст? Скажи мне? Ну не видел чтобы выпадающее меню категорий было!!!

Bump: Насчет иллюстраций есть пример, линк.

**karbid** · 13.11.2009 19:12

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

Ну где тут копипаст? Скажи мне? Ну не видел чтобы выпадающее меню категорий было!!!

Пардон. Среагировал на пост mall.
Не проверяя, подумал, что ты у Попова уроки тянешь.

**mall** · 13.11.2009 19:29

Пардон. Среагировал на пост mall.
Не проверяя, подумал, что ты у Попова уроки тянешь.

да вообще не важно откуда уроки, даже если он сам их написал. Е-мае форум не про JavaScript! или ты, Castiel_777, хочешь всем сменить профиль деятельности

чтобы все стали программистами

топик надо закрывать, что за бред вообще.

BUMP:::

Ну где тут копипаст? Скажи мне? Ну не видел чтобы выпадающее меню категорий было!!!

ты еще и обманываешь

сначала тут было другое содержание, потом ТС отредактировал пост и издевается над нами. Одним словом - Пятницо, еще и 13е число

**24110** · 13.11.2009 20:28

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

да вообще не важно откуда уроки, даже если он сам их написал. Е-мае форум не про JavaScript! или ты, Castiel_777, хочешь всем сменить профиль деятельности

чтобы все стали программистами

топик надо закрывать, что за бред вообще.

чувак поинты набирает, подумаешь

Castiel_777, ты хотя бы посмотрел, о чем тут люди в основном пишут, явно не javascript.

**Castiel_777** · 14.11.2009 10:26

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

да вообще не важно откуда уроки, даже если он сам их написал. Е-мае форум не про JavaScript! или ты, Castiel_777, хочешь всем сменить профиль деятельности

чтобы все стали программистами

топик надо закрывать, что за бред вообще.

BUMP:::

ты еще и обманываешь

сначала тут было другое содержание, потом ТС отредактировал пост и издевается над нами. Одним словом - Пятницо, еще и 13е число

Никого я не обманываю, говорю открыто сначала вставил не свой пост. Просто очень понравился слайдер. Думал людям интересно будет. Ты сказал, что копипаста не катит. Я вставил свой пост. Тебе опять не нравится, твое личное мнение. Но не тебе решать закрывать или нет, кому сменить профиль, а кому нет, если не интересно иди лесом с этой темы. А модеры потом решат, стоит про скрипты писать или нет.

Bump:

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

чувак поинты набирает, подумаешь

Castiel_777, ты хотя бы посмотрел, о чем тут люди в основном пишут, явно не javascript.

чувак! Тут все поинты набирают, люди пишут о разном. В это разделе писали про программирование, так что я посмотрел.

**excl** · 16.11.2009 19:33

Выпадающее меню под WP встречается в очень многих готовых темах. Так что не вникая в суть, можно выбрать темку под свой блог с уже реализованным выпадающим меню.

	13.11.2009 16:44 #1
Castiel_777 Senior Member Регистрация: 26.10.2009 Сообщений: 123 Репутация: 2	Здесь я буду писать разные коды и прикольные на мой взгляд фишки. Думаю, что кому-то пригодится, если что-то непонятно - спрашивайте, подскажу! Урок 1. Делаем выпадающее меню для КАТЕГОРИЙ wordpress! В сети вы найдете кучу туториалов как сделать выпадающее меню для wordpress, но там речь это страницах. Ну а вот я расскажу как сделать выпадающие категории. Такого я не нашел. Вот решил сам нарисовать. Поехали: Что нам понадобится: Плагин my-category-order, для того чтобы задать порядок сортировки как нам надо Знания html, как делать ненумерованные списки Немного css Ну и эффект jQuery HTML <div id="navigation"> <menu> <li><a href="<?php echo get_option('home'); ?>/" class="on">Главная</a></li> <?php wp_list_categories('orderby=order&title_li='); ?> </menu> </div> Первым элементом в меню будет главная странница. потом идет список категорий функция wp_list_categories (для новых версий wordpress), сортировка согласно настройки плагина my-category-order, title_li= это чтобы не было заголовка категории. Сделай стильное меню, при помощи CSS: /общий стиль блока меню/ #navigation{ height: 27px; background: #49B7D8; margin: auto auto auto auto; clear: both; font-size: 18px; } /стиль ссылок в меню/ #navigation li a{ color: #fff; display: block; line-height: 27px; padding: 0 10px; } #navigation li a:hover{ background: #07599d; text-decoration: none; } /стиль для элементов первого уровня, т.е. дочерних страниц/ #navigation li{ list-style: none; float: left; } /стиль для элементов дочернего меню/ #navigation li ul li{ float: none; } #navigation ul{ background: #49B7D8; margin: 0; padding: 0; position: absolute; z-index: 10; } /строка display:none прячет выпадающее меню/ #navigation ul{ display: none; background: #49B7D8; margin: 0; padding: 0; position: absolute; z-index: 10; } /подсветка активной категории/ #navigation .current-cat{ background:#07599d; color:3366CC; } обращаю внимание на последние строчки, здесь мы подсвечиваем активную категорию при помощи .current-cat Теперь подключаем сам jquery, прописываем между <head> и </head>: <script src="wp-includes/js/jquery/jquery.js" type="text/javascript"></script> И для отображения подменю пишем: <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#menu li").hover( function(){ jQuery(this).find('ul').show(); }, function(){ jQuery(this).find('ul').hide(); } ); }); </script> Это все, но мы пойдем дальше сделаем эффект: <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#menu li").hover( function(){ jQuery(this).find('ul').slideDown(); }, function(){ jQuery(this).find('ul').slideUp(); } ); }); </script> Пока все, смотрим пример здесь Вы горнолыжник или сноубордист? Тогда горнолыжная база "Восток" в г. Арсеньеве ждет Вас!
0 Castiel_777

	13.11.2009 17:18 #2
mall Гуру Регистрация: 08.09.2009 Сообщений: 1,981 Записей в дневнике: 4 Репутация: 193	Здесь я буду писать разные коды и прикольные на мой взгляд фишки. вот клован, статья - полный копипаст от сюда
0 mall

	13.11.2009 17:54 #3
Castiel_777 Senior Member Регистрация: 26.10.2009 Сообщений: 123 Репутация: 2	Сообщение от mall вот клован, статья - полный копипаст от сюда Ладно буду писать только отсебятину! Вы горнолыжник или сноубордист? Тогда горнолыжная база "Восток" в г. Арсеньеве ждет Вас!
0 Castiel_777

	13.11.2009 18:25 #4
karbid Гуру Регистрация: 06.09.2009 Сообщений: 2,236 Репутация: 90	Сообщение от Castiel_777 Ладно буду писать только отсебятину! Копипастить статьи известных авторов да ещё и без иллюстраций - это офигеть как несерьезно...
0 karbid

	13.11.2009 18:51 #5
Castiel_777 Senior Member Регистрация: 26.10.2009 Сообщений: 123 Репутация: 2	Сообщение от karbid Копипастить статьи известных авторов да ещё и без иллюстраций - это офигеть как несерьезно... Ну где тут копипаст? Скажи мне? Ну не видел чтобы выпадающее меню категорий было!!! Bump: Насчет иллюстраций есть пример, линк. Вы горнолыжник или сноубордист? Тогда горнолыжная база "Восток" в г. Арсеньеве ждет Вас!
0 Castiel_777

Уроки по jQuery

Опции темы

Тэги топика:

Похожие темы

Jquery Captcha

Интересные темы

jquery капча

captcha jquery

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	13.11.2009 19:12 #6
karbid Гуру Регистрация: 06.09.2009 Сообщений: 2,236 Репутация: 90	Сообщение от Castiel_777 Ну где тут копипаст? Скажи мне? Ну не видел чтобы выпадающее меню категорий было!!! Пардон. Среагировал на пост mall. Не проверяя, подумал, что ты у Попова уроки тянешь.
0 karbid

	13.11.2009 19:29 #7
mall Гуру Регистрация: 08.09.2009 Сообщений: 1,981 Записей в дневнике: 4 Репутация: 193	Пардон. Среагировал на пост mall. Не проверяя, подумал, что ты у Попова уроки тянешь. да вообще не важно откуда уроки, даже если он сам их написал. Е-мае форум не про JavaScript! или ты, Castiel_777, хочешь всем сменить профиль деятельности чтобы все стали программистами топик надо закрывать, что за бред вообще. BUMP::: Ну где тут копипаст? Скажи мне? Ну не видел чтобы выпадающее меню категорий было!!! ты еще и обманываешь сначала тут было другое содержание, потом ТС отредактировал пост и издевается над нами. Одним словом - Пятницо, еще и 13е число
0 mall

	13.11.2009 20:28 #8
24110 Гуру Регистрация: 07.09.2009 Сообщений: 1,649 Репутация: 91	Сообщение от mall да вообще не важно откуда уроки, даже если он сам их написал. Е-мае форум не про JavaScript! или ты, Castiel_777, хочешь всем сменить профиль деятельности чтобы все стали программистами топик надо закрывать, что за бред вообще. чувак поинты набирает, подумаешь Castiel_777, ты хотя бы посмотрел, о чем тут люди в основном пишут, явно не javascript. Парам-пам-пам!
0 24110

	14.11.2009 10:26 #9
Castiel_777 Senior Member Регистрация: 26.10.2009 Сообщений: 123 Репутация: 2	Сообщение от mall да вообще не важно откуда уроки, даже если он сам их написал. Е-мае форум не про JavaScript! или ты, Castiel_777, хочешь всем сменить профиль деятельности чтобы все стали программистами топик надо закрывать, что за бред вообще. BUMP::: ты еще и обманываешь сначала тут было другое содержание, потом ТС отредактировал пост и издевается над нами. Одним словом - Пятницо, еще и 13е число Никого я не обманываю, говорю открыто сначала вставил не свой пост. Просто очень понравился слайдер. Думал людям интересно будет. Ты сказал, что копипаста не катит. Я вставил свой пост. Тебе опять не нравится, твое личное мнение. Но не тебе решать закрывать или нет, кому сменить профиль, а кому нет, если не интересно иди лесом с этой темы. А модеры потом решат, стоит про скрипты писать или нет. Bump: Сообщение от 24110 чувак поинты набирает, подумаешь Castiel_777, ты хотя бы посмотрел, о чем тут люди в основном пишут, явно не javascript. чувак! Тут все поинты набирают, люди пишут о разном. В это разделе писали про программирование, так что я посмотрел. Вы горнолыжник или сноубордист? Тогда горнолыжная база "Восток" в г. Арсеньеве ждет Вас!
0 Castiel_777

	16.11.2009 19:33 #10
excl Гуру Регистрация: 03.09.2009 Сообщений: 722 Репутация: 22	Выпадающее меню под WP встречается в очень многих готовых темах. Так что не вникая в суть, можно выбрать темку под свой блог с уже реализованным выпадающим меню.
0 excl

Уроки по jQuery

Опции темы

Тэги топика:

Похожие темы

Jquery Captcha

Интересные темы

jquery капча

captcha jquery

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Баннеры

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры