Здесь я буду писать разные коды и прикольные на мой взгляд фишки.
Думаю, что кому-то пригодится, если что-то непонятно - спрашивайте, подскажу!
Урок 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>
Пока все, смотрим пример здесь
- 13.11.2009 16:44Senior Member
- Регистрация: 26.10.2009
- Сообщений: 123
- Репутация: 2
- 0
13.11.2009 17:18вот клован, статья - полный копипаст от сюдаЗдесь я буду писать разные коды и прикольные на мой взгляд фишки.- 0
- 13.11.2009 17:54Senior Member
- Регистрация: 26.10.2009
- Сообщений: 123
- Репутация: 2
Ладно буду писать только отсебятину!
Сообщение от mall 
- 0
13.11.2009 18:25Гуру
- Регистрация: 06.09.2009
- Сообщений: 2,236
- Репутация: 90
Копипастить статьи известных авторов да ещё и без иллюстраций - это офигеть как несерьезно... Сообщение от Castiel_777 - 0
- 13.11.2009 18:51Senior Member
- Регистрация: 26.10.2009
- Сообщений: 123
- Репутация: 2
Ну где тут копипаст? Скажи мне? Ну не видел чтобы выпадающее меню категорий было!!! Сообщение от karbid
Bump: Насчет иллюстраций есть пример, линк.- 0
- 13.11.2009 19:12Гуру
- Регистрация: 06.09.2009
- Сообщений: 2,236
- Репутация: 90
Пардон. Среагировал на пост mall. Сообщение от Castiel_777
Не проверяя, подумал, что ты у Попова уроки тянешь.- 0
- 13.11.2009 19:29да вообще не важно откуда уроки, даже если он сам их написал. Е-мае форум не про JavaScript! или ты, Castiel_777, хочешь всем сменить профиль деятельностиПардон. Среагировал на пост mall.
Не проверяя, подумал, что ты у Попова уроки тянешь.
чтобы все стали программистами
топик надо закрывать, что за бред вообще.
BUMP:::
ты еще и обманываешьНу где тут копипаст? Скажи мне? Ну не видел чтобы выпадающее меню категорий было!!!
сначала тут было другое содержание, потом ТС отредактировал пост и издевается над нами. Одним словом - Пятницо, еще и 13е число - 0
13.11.2009 20:28Гуру
- Регистрация: 07.09.2009
- Сообщений: 1,649
- Репутация: 91
чувак поинты набирает, подумаешь Сообщение от mall да вообще не важно откуда уроки, даже если он сам их написал. Е-мае форум не про JavaScript! или ты, Castiel_777, хочешь всем сменить профиль деятельности чтобы все стали программистами
топик надо закрывать, что за бред вообще.
Castiel_777, ты хотя бы посмотрел, о чем тут люди в основном пишут, явно не javascript.- 0
- 14.11.2009 10:26Senior Member
- Регистрация: 26.10.2009
- Сообщений: 123
- Репутация: 2
Никого я не обманываю, говорю открыто сначала вставил не свой пост. Просто очень понравился слайдер. Думал людям интересно будет. Ты сказал, что копипаста не катит. Я вставил свой пост. Тебе опять не нравится, твое личное мнение. Но не тебе решать закрывать или нет, кому сменить профиль, а кому нет, если не интересно иди лесом с этой темы. А модеры потом решат, стоит про скрипты писать или нет. Сообщение от mall да вообще не важно откуда уроки, даже если он сам их написал. Е-мае форум не про JavaScript! или ты, Castiel_777, хочешь всем сменить профиль деятельности чтобы все стали программистами
топик надо закрывать, что за бред вообще.
BUMP:::
ты еще и обманываешь сначала тут было другое содержание, потом ТС отредактировал пост и издевается над нами. Одним словом - Пятницо, еще и 13е число
Bump:чувак! Тут все поинты набирают, люди пишут о разном. В это разделе писали про программирование, так что я посмотрел. Сообщение от 24110 чувак поинты набирает, подумаешь
Castiel_777, ты хотя бы посмотрел, о чем тут люди в основном пишут, явно не javascript.- 0
- 16.11.2009 19:33Гуру
- Регистрация: 03.09.2009
- Сообщений: 722
- Репутация: 22
Выпадающее меню под WP встречается в очень многих готовых темах. Так что не вникая в суть, можно выбрать темку под свой блог с уже реализованным выпадающим меню.
- 0
Тэги топика:
Похожие темы
| Темы | Раздел | Ответов | Последний пост |
|---|---|---|---|
Jquery Captcha | Дайджест блогосферы | 0 | 15.04.2010 23:35 |
Интересные темы
jquery капча
Тема посвящается созданию капчи с помощью плагина jquery и другая полезная информация, читайте далее.
captcha jquery
Технология Ajax дает возможность нам сделать оригинальную captcha с помощью отличного плагина jquery.
adsense cpa google parser proxy wordpress xrumer yandex youtube zennoposter аккаунт база банка было быть версия вконтакт гугл делиться день есть запрос идея изменение импорт использовать качественный кейс ключ комплексный контакт купить можно новый нч-сч партнерский партнёрка партнёрская программа поддержка поинт поинтовый прогон программа продвинуть работа сайт сбор сервис скрипт спам ссылка стать стоимость страница тиц-пр трафик учет форум хрумер шаблон
Тем:
77,476Сообщений:
761,496Пользователей:
30,076Сейчас на сайте:
0 пользователей и 125 гостей
