вторник, 26 марта 2013 г.

Меню горизонтально-обалденное \Йёжа Йежов\


В общем долго искал хорошее меню .Но всё как то не попадалось ,и вот удача улыбнулась.Наткнулся на интересный блог под названием
Блог своеобразно оформлен ,много интересных статей,написанных в общем-то понятно даже для чайника .Хотя с учётом моей лени ,я вряд ли до чего доберусь .Но меню ,которое там обнаружил ,всё-таки осилил .Оригинальное , своеобразное и скажем так -не затасканное .Так что если хотим чуточку отличаться от других блогов ,самое оно!
.Поскольку на блоге  http://kyklamoda.blogspot.com/ Я являюсь соучастником ,решил попробовать создать это меню . Результат моих потуг ЗДЕСЬ.Теперь это меню можно видеть и на этом блоге Немного переделанный от оригинального кода , как автор заметил -это тот же конструктор .
Нужное выкидываем ,ненужное крадём ! То есть наоборот ,конечно
Всё что нам понадобится -это немного терпения , или много ,кому как  .
Что понравилось в меню ,так это то ,что не надо ковыряться в шаблоне !
Итак,засучим рукава и приступаем . Идём в редактирование своего блога или чужого ,кому как нравится.Ищем слева 
ДИЗАЙН
Нажимаем и перед нами предстаёт скелет блога во всей красе . Ищем В любом месте ,потом можно перятянуть мышкой
ДОБАВИТЬ ГАДЖЕТ
Добавляем
 HTML/JavaScript

В гаджет вставляем наше меню .Если вам надо ставить стиль меню отдельно ,читаем первую часть статьи , если вам надо без заморочек переходим ко второй части статьи.
Вариант второй  Так же ,как и первый вариант вставляем (или по первому варианту или по второму)в гаджет HTML   .Перейти к упрощённому варианту

Копируем и вставляем в свободное поле
<style> /*Пишите  открывающий тег */  /*Здесь вставляете весь CSS код менюшки*/ </style> /*Пишите закрывающий тег */ /* Тут, ниже закрывающего тега</style>вставляете HTML код меню */
В названии гаджета ничего не пишем.
Жмём Сохранить Перетаскиваем мышкой под шапку блога\заголовок.
Сохранить расположение\справа вверху\
Самое трудное сделано ,мы определили место ,где будет жить наше меню.
 Гаджет всегда можно отредактировать или удалить ,если вдруг не понравится ,нажав изменить


В гаджет вставляем наше меню .Если вам надо ставить стиль меню отдельно ,читаем первую часть статьи , если вам надо без заморочек переходим ко второй части статьи.
Вариант второй  Так же ,как и первый вариант вставляем (или по первому варианту или по второму)в гаджет HTML   .Перейти к упрощённому варианту
И забираем код CSS-код стилей ,Кликаем  изменить гаджет , вставляем вместо
  /*Здесь вставляете весь CSS код менюшки*/ 
 Кто умеет может изменить стиль ,цвет и т.д. .Кто не умеет , лучше туда не лезть Для изменения лучше копировать в блокнот и там покуражиться ,если спец .Поскольку я чайник , то туда даже и не заглядываю.
Копируем  HTML код .И вставляем  на место
/* Тут, ниже закрывающего тега</style>вставляете HTML код меню */
Кликаем в гаджете 
 Сохранить
 Смотрим примерное расположение блоков ,какие-то можно убрать ,или скопировать и поставить на место других .Свобода творчества .Благо автор всё подробно расписал -где что в коде.Заменяем названия на свои .Смотрим что получается ,лучше редактировать через блокнот.Ищем
<a href="#">link</a>
На место # вставляем  свои ссылки ,на место link свои названия ссылок .Можно увеличить количество ссылок путём копирования .Тратим вечерок на создание меню и наслаждаемся оным !!!!!!!!!!!!!

Значит ,если не хотим  заморачиваться ,Можно вставить сразу код полностью ,(разделение было сделано для тех ,кто хочет стиль прописать в шаблон .)Скачиваем код здесь это полный код  (нажмите на ссылку) ,скачиваем ,копируем всё , вставляем в
HTML/JavaScript (смотрите 
Волшебный гаджет HTML/JavaScript .Йёжа Йежов)

.
Про изменение цвета в меню 
Попробуем изменить цвет в данном меню ,раз уж возник такой вопрос.Я написал в коде комментарии ,чтобы нам легче ориентироваться было .Скачать можно здесь.
Это тот же код меню ,что и выше , просто к цветам , я дописал комменты ,правда мож не везде ,но основные .В принципе код можно сразу вставить в
HTML/JavaScript (смотрите 
Волшебный гаджет HTML/JavaScript .Йёжа Йежов) 
И редактировать цвет там . Но я бы рекомендовал блокнот ,к примеру Notepad
Для начала скачайте код меню с моими комментами  по цвету .

Стили внешних кнопок меню

открываем код в блокноте .В блоке Стили внешних кнопок меню Можно поменять :


 Цвет текста на кнопках  вместо #EEEEEE ставим своё значение


Цвет текста на кнопках при наведении мышкой
вместо #161616 ставим своё значение


Цвет фона текста на кнопках при наведении мышкой
вместо #EEEEEE ставим своё значение

Стиль внешних кнопок меню (без выпадающих блоков)



Цвет текста на кнопке (без выпадающего блока )без наведения мышки
вместо #EEEEEE ставим своё значение

Цвет фона текста на кнопке (без выпадающего блока )при наведения мышки
вместо #EEEEEE ставим своё значение

 

Цвет текста на кнопке (без выпадающего блока )при наведении мышки
вместо #161616 ставим своё значение

Цвет рамки  на кнопке (без выпадающего блока )при наведении мышки
 вместо #000 ставим своё значение

 Стили контента выпадающих блоков

 Цвет линии под заголовком в выпадающем блоке
  вместо #888888 ставим своё значение


Цвет текста в выпадающем блоге меню 2 вверху
 вместо #fff ставим своё значение

 Цвет текста в выпадающем блоге меню 1
  вместо #000 ставим своё значение

 Стиль изображений в блоках меню (размер, рамка, тень выравнивание) 


 Цвет рамки картинки в меню 1
 вместо #FFFAFA ставим своё значение



 Цвет рамки картинки в меню 1
 вместо #000000 ставим своё значение


 Стили цвета для меню, блоков и ссылок


 Цвет для верхней части меню
 вместо #ff6717 ставим своё значение

 


 Цвет для нижней части меню
 вместо #c14300 ставим своё значение

 Цвет для рамки вокруг меню
 вместо #CD6600 ставим своё значение


 Градиент верх фона выпадающего блока
 вместо #EEEEEE ставим своё значение

 


 Градиент низ фона выпадающего блока
 вместо #BBBBBB ставим своё значение

 Фон сообщения вверху в меню 2
  вместо #363636 ставим своё значение

 


РАМКА фона сообщения вверху в меню 2
вместо #000 ставим своё значение

 Фон сообщения вверху в меню 1
 вместо #FFFFF0 ставим своё значение

 

 РАМКА сообщения вверху в меню 1
 вместо #fff ставим своё значение


ЦВЕТ ССЫЛОК
вместо #FF4500 ставим своё значение

 

ЦВЕТ ПОСЕЩЁННЫХ ССЫЛОК
вместо #F4A460 ставим своё значение



 ФОН  КНОПОК ВНУТРИ БЛОКА (НА ССЫЛКАХ)В МЕНЮ 3
 вместо #E8E8E8 ставим своё значение


РАМКА НА КНОПКАХ ВНУТРИ БЛОКА(НА ССЫЛКАХ)В МЕНЮ 3
вместо #fff ставим своё значение

 

 ЦВЕТ ФОНА КНОПКИ ПРИ НАВЕДЕНИИ МЫШКИ (НА ССЫЛКАХ) В МЕНЮ 3
 вместо #F8F8FF ставим своё значение



РАМКА ПРИ НАВЕДЕНИИ МЫШКОЙ  НА КНОПКИ ВНУТРИ БЛОКА (НА ССЫЛКАХ) В МЕНЮ 3

 вместо #FFF5EE ставим своё значение
........  
С уважением !
                        

ЕЩЁ СТАТЕЙ ОТ ЙЁЖИ ЙЕЖОВА



.
.
Об Авторе

Комментариев нет:

Отправить комментарий