О сайте | Обратная связь | Памятка для вебмастера
[ Регистрация · Войти · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум » Создание сайта » Wordpress » Создание jquery меню на блоге на wordpress (проблема с созданием jquery меню вкладками)
Создание jquery меню на блоге на wordpress
Russkii Дата: Понедельник, 17.10.2011, 00:46 | Сообщение # 1
Первоклашка
Группа: Копирайтеры
Сообщений: 14
Город: Орёл
Репутация: 0
Статус: Offline
Есть блог: http://blognat.ru

Треба: вставить в сайдбар меню, где будут вкладки. Планируется сделать одну колонку.

(Пробовал, пробовал)*300 раз. Ничего не получается.
Подключал в head саму библиотеку, вставлял оформление в css, вставлял сам код вывода в колонке - по разным мануалам. Ничего не получается. Здесь слеза)

Вопрос: что делать и кто виноват? :)


otlichnica Дата: Понедельник, 17.10.2011, 01:57 | Сообщение # 2
Профессор(ша)
Награды: 81
Группа: Администраторы
Сообщений: 9888
Город: Астрахань
Репутация: 287
Статус: Offline
На самом сайте меню не вижу. Вызов скриптов вижу, а кода самого меню - нет. Ты видимо его убрал. Но вариантов проблемы всего две.
1. JQuery конфликтует с другой библиотекой , например, mootool
2. Используются идентификаторы, которые уже использованы в другом скрипте
Так что ставь на место и разберемся


Делаю сайты под ключ на заказ. Меняю шапки и цветовую гамму на Вашем сайте Портфолио и расценки

В выходные я не работаю!!!
Russkii Дата: Понедельник, 17.10.2011, 20:30 | Сообщение # 3
Первоклашка
Группа: Копирайтеры
Сообщений: 14
Город: Орёл
Репутация: 0
Статус: Offline
Вот, вставил.
В правом сайдбаре внизу.


otlichnica Дата: Понедельник, 17.10.2011, 22:16 | Сообщение # 4
Профессор(ша)
Награды: 81
Группа: Администраторы
Сообщений: 9888
Город: Астрахань
Репутация: 287
Статус: Offline
Russkii, смотри. Если я правильно поняла. Скрипт , который должен обрабатывать меню
http://blognat.ru/wp-content/themes/Krem_Jam/kremjam/js/menu.js
а в нем всего пару строк
Code
function mainmenu(){

$(" #nav li").hover(function(){
   $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(300);
   },function(){
   $(this).find('ul:first').css({visibility: "hidden"});
   });
}
   
  $(document).ready(function(){      
  mainmenu();
});

$(" #nav li") - вот эта штука означает, что реакция должна быть при наведении на элемент li для идентификатора nav
т.е. твой код меню должен быть
Code
<div class="section">

  <ul class="tabs" id="nav">

    <li class="current">1-я вкладка</li>

    <li>2-я вкладка</li>

  </ul>

  <div class="box visible">

    Содержимое первого блока

  </div>

  <div class="box">

    Содержимое второго блока

  </div>

</div>



Но даже в этот случае исходный код некорректен. Откуда ты взял этот плагин или этот скрипт? Можешь показать работающий вариант?


Делаю сайты под ключ на заказ. Меняю шапки и цветовую гамму на Вашем сайте Портфолио и расценки

В выходные я не работаю!!!
Russkii Дата: Понедельник, 17.10.2011, 22:20 | Сообщение # 5
Первоклашка
Группа: Копирайтеры
Сообщений: 14
Город: Орёл
Репутация: 0
Статус: Offline
скрип который должен обрабатывать меню: http://blognat.ru/wp-content/themes/Krem_Jam/kremjam/js/tabs2.js

скрип отсюда. http://dimox.name/load-jquery-dynamically/ сам данный урок не помог. один человек прислал вот такое

Quote
/* tabs */

ul.tabs {

height: 27px;
background: #FFF;
border: none;
border-bottom: 1px solid #F9F9F9;
margin: -4px -4px 0 !important;
padding: 0 4px;
overflow: hidden;
list-style-type: none;

}

tabs li {

float: left;
line-height: 27px;
margin: 0 1px 0 0;
padding: 0 0 0 11px;
font-weight: bold;
cursor: pointer;
border: none;
}

tabs li span {

float: left;
padding: 0 11px 0 0;
height: 27px;
color: #00A3E3;
text-shadow: 1px 1px 1px #FFF;

}

tabs li.current {
background: url(i/tabs.gif) no-repeat;
}
tabs li.current span {
background: url(i/tabs.gif) 100% 0 no-repeat;
color: #444;
}
tabs li:hover {
background: url(i/tabs.gif) 0 -27px no-repeat;
}
tabs li:hover span {
background: url(i/tabs.gif) 100% -27px no-repeat;
}
tabs li:hover span {
color: #D26200;
}
div.box {
border: 1px solid #E1E1E1;
padding: 0px 5px;
display: none;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
}
div.box.visible {
display: block;
}
div.box:hover {
border: 1px solid #D4D4D4;
}

/* end tabs */

Вот картинка если что http://mixez.ru/wp-content/themes/magic/i/tabs.gif
И статья как лучше всего jquery подключать http://dimox.name/load-jquery-dynamically/

Потом смотри вот эту статью http://dimox.name/universal-jquery-tabs-script/
Скачивай сам скрипт снизу, переименуй его в tabs2.js (т.к. tabs.js использует другой переключатель в этой теме) и заливай файл на хост.
Потом подключай этот скрипт сразу после
<script type="text/javascript" src="http://******.ru/wp-content/themes/magic/tabs.js"></script>
вставляй
<script type="text/javascript" src="http://******.ru/wp-content/themes/magic/tabs2.js"></script>
а потом в нужное место где хочешь выводить таблицу вставляй

<div class="section">
<ul class="tabs">
<li class="current">1-я вкладка</li>
<li>2-я вкладка</li>
</ul>
<div class="box visible">
Содержимое первого блока
</div>
<div class="box">
Содержимое второго блока
</div>
</div>

Можно добавлять неограниченно вкладок))


вот, собственно
otlichnica Дата: Понедельник, 17.10.2011, 22:26 | Сообщение # 6
Профессор(ша)
Награды: 81
Группа: Администраторы
Сообщений: 9888
Город: Астрахань
Репутация: 287
Статус: Offline
ОК. Тогда давай по порядку. В файл style.css добавь CSS, который тебе предложили
Code
/* tabs */  

ul.tabs {  

height: 27px;  
background: #FFF;  
border: none;  
border-bottom: 1px solid #F9F9F9;  
margin: -4px -4px 0 !important;  
padding: 0 4px;  
overflow: hidden;  
list-style-type: none;  

}  

tabs li {  

float: left;  
line-height: 27px;  
margin: 0 1px 0 0;  
padding: 0 0 0 11px;  
font-weight: bold;  
cursor: pointer;  
border: none;  
}  

tabs li span {  

float: left;  
padding: 0 11px 0 0;  
height: 27px;  
color: #00A3E3;  
text-shadow: 1px 1px 1px #FFF;  

}  

tabs li.current {  
background: url(i/tabs.gif) no-repeat;  
}  
tabs li.current span {  
background: url(i/tabs.gif) 100% 0 no-repeat;  
color: #444;  
}  
tabs li:hover {  
background: url(i/tabs.gif) 0 -27px no-repeat;  
}  
tabs li:hover span {  
background: url(i/tabs.gif) 100% -27px no-repeat;  
}  
tabs li:hover span {  
color: #D26200;  
}  
div.box {  
border: 1px solid #E1E1E1;  
padding: 0px 5px;  
display: none;  
-moz-border-radius: 0 5px 5px 5px;  
-webkit-border-radius: 0 5px 5px 5px;  
border-radius: 0 5px 5px 5px;  
}  
div.box.visible {  
display: block;  
}  
div.box:hover {  
border: 1px solid #D4D4D4;  
}  

/* end tabs */

у тебя его сейчас нет. Я на связи. Отпишись, как это сделаешь


Делаю сайты под ключ на заказ. Меняю шапки и цветовую гамму на Вашем сайте Портфолио и расценки

В выходные я не работаю!!!
Russkii Дата: Понедельник, 17.10.2011, 22:31 | Сообщение # 7
Первоклашка
Группа: Копирайтеры
Сообщений: 14
Город: Орёл
Репутация: 0
Статус: Offline
вставил еще раз, сохранил. :) он у меня был в самом низу. стопудово говорю)
otlichnica Дата: Понедельник, 17.10.2011, 22:46 | Сообщение # 8
Профессор(ша)
Награды: 81
Группа: Администраторы
Сообщений: 9888
Город: Астрахань
Репутация: 287
Статус: Offline
Russkii, в CSS сразу не углядела - перед всеми tabs должна стоять .
например,
Code
.tabs li {   

float: left;   
line-height: 27px;   
margin: 0 1px 0 0;   
padding: 0 0 0 11px;   
font-weight: bold;   
cursor: pointer;   
border: none;   
}  

когда описывается класс - ставится точка, когда идентификатор - #


Делаю сайты под ключ на заказ. Меняю шапки и цветовую гамму на Вашем сайте Портфолио и расценки

В выходные я не работаю!!!
Russkii Дата: Понедельник, 17.10.2011, 22:54 | Сообщение # 9
Первоклашка
Группа: Копирайтеры
Сообщений: 14
Город: Орёл
Репутация: 0
Статус: Offline
сделал, результата нет.
Что дальше?)

Могу с нуля начать делать пошагово, если хочешь. Может так проще будет :)
otlichnica Дата: Понедельник, 17.10.2011, 23:13 | Сообщение # 10
Профессор(ша)
Награды: 81
Группа: Администраторы
Сообщений: 9888
Город: Астрахань
Репутация: 287
Статус: Offline
Нашла я твою бяку. В CSS чуть выше
Code
.emailform {
background: none;
width: 170px;
position: relative;
margin-top: 10px;
height: 20px;
left: 8px;
margin-bottom: 15px;

не хватает закрывающейся фигурной скобки. Из-за нее наши стили и не читаются


Делаю сайты под ключ на заказ. Меняю шапки и цветовую гамму на Вашем сайте Портфолио и расценки

В выходные я не работаю!!!


Форум » Создание сайта » Wordpress » Создание jquery меню на блоге на wordpress (проблема с созданием jquery меню вкладками)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:
Создание jquery меню на блоге на wordpress - Создание сайта - Wordpress - Форум
Сегодня были на форуме:

Конструктор кнопок он-лайн


Получить код CSS

Подбор цветов

Справочник по html и CSS

Наши копирайтеры

Поиск