Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Ответить
1 2

Как реализуются активные кнопки?

Ater

  • Атом-мозг
  • Юзер
  • 750
  • Репутация:15 
  • Предупреждения: 0 
  • Регистрация:
    17 Авг 2010
#1
Итак, не знаю в тот ли раздел или нет, но к дизайну это ближе чем ко всему остальному.
У меня есть шаблон и в этом шаблоне реализовано 3 состояния кнопок:
Пассивная кнопка
Кнопка с наведенной мышкой
Активная, нажатая кнопка

Так вот у меня вопрос каким же раком реализовать это самое выделение активной кнопки?
Я конечно же понимаю что на той кнопке которая активная должно стоять class="active" , но каким образом это должно перескакивать с одной кнопки на другую? с помощью джавы или еще как?

Что бы было более понятно что за кнопки что о чем вообще речь то вот на этом сайте http://www.gitach.ru/ есть горизонтальное меню при нажатии на любую кнопку и переход в соответствующий раздел кнопка подкрашивается.

Как это реализовано там я фиг знаю потому как шаблон для друпала и там вообще много чего через переменные меню. ну либо я фиг знаю...

Все мое имхо...
------
Не флуди и не да зафлудим будешь!

ARMI

  • Заклинатель Атома
  • Пользователь
  • 1858
  • Репутация:46 
  • Предупреждения: 0 
  • Регистрация:
    4 Янв 2011
#2
в CSS создаешь новый клас и вот схема
Code:
<style type="text/css">
   a:link {
    color: #0000d0; /* Цвет ссылок */
   }
   a:hover {
    background: #786b59; /* Стиль элемента при наведении на него курсора мыши */
   }
   a:visited {
    color: #900060; /* Цвет посещенных ссылок */
   }
   a:active {
    color: #f00; /* Цвет активной ссылки */ 
   } 
  </style>
с картинками так же как и с цветами

вот тебе пару ссылок
Необходима авторизация. Регистрация

ЗЫ. если я тебя правильно понял это должно помочь

Отредактировано автором 6 Июн 2011
Я горжусь тем, что помогаю в развитии бесплатной CMS - AtomX

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#3
Code:
a:active {
    color: #f00; /* Цвет активной ссылки */ 
   }

Вы наверное удивитесь, но вот я не знаю что означает это "active". Я правильно понял, браузер сам понимает что пользователь находится на странице, на которую ведет ссылка и присваевает ей этот стиль?

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

ARMI

  • Заклинатель Атома
  • Пользователь
  • 1858
  • Репутация:46 
  • Предупреждения: 0 
  • Регистрация:
    4 Янв 2011
#4
просто при нажатии на ссылку в данном примере она меняет цвет

Я горжусь тем, что помогаю в развитии бесплатной CMS - AtomX

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#5
проверил лично.
:active не влияет на твое положениее. Стиль active применяется в момент нажатия на элемент(ссылку). А как только ты отпускаешь клавишу, стиль обратно возвращается в исходное положение. Бред. Зачем это надо не пойму.


Ater, по поводу твоего вопроса....

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

ARMI

  • Заклинатель Атома
  • Пользователь
  • 1858
  • Репутация:46 
  • Предупреждения: 0 
  • Регистрация:
    4 Янв 2011
#6
Drunya пишет:
Стиль active применяется в момент нажатия на элемент(ссылку). А как только ты отпускаешь клавишу, стиль обратно возвращается в исходное положение. Бред. Зачем это надо не пойму.
Именно это я и имел ввиду. Это нужно для красоты) для чего же еще)

Я горжусь тем, что помогаю в развитии бесплатной CMS - AtomX

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#7
Обычно это делается джавой или пхп, как удобнее. Просто проверяешь текущую страницу и подсвечиваешь нужную ссылку. Что то типа

 1 
 2 
 3 
 4 
 5 
<?php if ($page == 'login') {
   echo <
class="active">
} else {
   echo <
a>
}
?>

Добавлено2011.06.06 19-17

в фапосе, так как мы можем сделать основной файл шаблона разный для каждого модуля, это можно сделать, создав для каждого модуля свой основной шаблон. Эти шаблоны будут одинаковые(можно и разные), с одним отличием - в каждом будет меню и в этом меню ссылка на этот же модуль будет выделена. Надеюсь понятно выразился)

Добавлено2011.06.06 19-19

ARMI пишет:
Именно это я и имел ввиду. Это нужно для красоты) для чего же еще)
просто мне показалось, что Атер имел виду другое.

Например при переходе на страницу "Авторизация" что бы ссылка на эту страницу была подсвечена, как бы говоря пользователю, что в данный момент он на этой странице)

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Ater

  • Атом-мозг
  • Юзер
  • 750
  • Репутация:15 
  • Предупреждения: 0 
  • Регистрация:
    17 Авг 2010
#8
Drunya пишет:
Например при переходе на страницу "Авторизация" что бы ссылка на эту страницу была подсвечена, как бы говоря пользователю, что в данный момент он на этой странице)

да, именно это я и имел ввиду.
Просто в друпале это как то само по себе реализовано и он умеет это делать. Когда я ему создал шаблон через прогу то все подтянулось автоматом.А вот тут затыки вышли =(

т.е. насколько я понял надо запихать менюшку в снипет, при этом неплохо бы ее сформировать автоматом, приклеить к нему стили и цеплять актив уже через php.


мда... терь надо придумать как это сделать, потому как в этом я ну совсем ничего не шарю =(
а меню формируется из разделов новостей. ну это так, на всякий :)

Все мое имхо...
------
Не флуди и не да зафлудим будешь!

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#9
на самом деле все просто довольно. Только что бы я мог конкретно что-то посоветовать, мне надо знать конкретную задачу. Можешь сказать как можно точнее что именно надо? Список категорий что ли хочешь таким макаром сделать?

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Ater

  • Атом-мозг
  • Юзер
  • 750
  • Репутация:15 
  • Предупреждения: 0 
  • Регистрация:
    17 Авг 2010
#10
Меню формируется из разделов новостей (именно разделов, а не категорий). Т.е. берем все разделы которые созданы в модуле новости и формируем из них меню.

Соответственно меню я засуну в диз туда куда мне нужно и применю к ним следующие стили:
Code:
<ul class="niz-menu">
<li>
ссылка
</li>
</ul>

К нажатой кнопке должен передаваться параметр class="active"

ну вот как то так, более подробно не выходит пока что =(

Отредактировано автором 7 Июн 2011
Все мое имхо...
------
Не флуди и не да зафлудим будешь!
1 2
Сейчас online: 41. Зарегистрированных: 2. Гостей: 39.