В общем долго искал хорошее меню .Но всё как то не попадалось ,и вот удача улыбнулась.Наткнулся на интересный блог под названием
Блог своеобразно оформлен ,много интересных статей,написанных в общем-то понятно даже для чайника .Хотя с учётом моей лени ,я вряд ли до чего доберусь .Но меню ,которое там обнаружил ,всё-таки осилил .Оригинальное , своеобразное и скажем так -не затасканное .Так что если хотим чуточку отличаться от других блогов ,самое оно!
.Поскольку на блоге http://kyklamoda.blogspot.com/
Я являюсь соучастником ,решил попробовать создать это меню .
Результат моих потуг ЗДЕСЬ.Теперь это меню можно видеть и на этом блоге
Немного переделанный от оригинального кода , как автор заметил -это тот же конструктор .
Нужное выкидываем ,ненужное крадём ! То есть наоборот ,конечно
Всё что нам понадобится -это немного терпения , или много ,кому как .
Что понравилось в меню ,так это то ,что не надо ковыряться в шаблоне !
Итак,засучим рукава и приступаем .
Идём в редактирование своего блога или чужого ,кому как нравится.Ищем слева
В гаджет вставляем наше меню .Если вам надо ставить стиль меню отдельно ,читаем первую часть статьи , если вам надо без заморочек переходим ко второй части статьи.
Вариант второй Так же ,как и первый вариант вставляем (или по первому варианту или по второму)в гаджет HTML .Перейти к упрощённому варианту
Копируем и вставляем в свободное поле
ДИЗАЙННажимаем и перед нами предстаёт скелет блога во всей красе . Ищем В любом месте ,потом можно перятянуть мышкой
ДОБАВИТЬ ГАДЖЕТДобавляем
HTML/JavaScript
В гаджет вставляем наше меню .Если вам надо ставить стиль меню отдельно ,читаем первую часть статьи , если вам надо без заморочек переходим ко второй части статьи.
Вариант второй Так же ,как и первый вариант вставляем (или по первому варианту или по второму)в гаджет HTML .Перейти к упрощённому варианту
Копируем и вставляем в свободное поле
<style> /*Пишите открывающий тег */
/*Здесь вставляете весь CSS код менюшки*/
</style> /*Пишите закрывающий тег */
/* Тут, ниже закрывающего тега</style>вставляете HTML код меню */
В названии гаджета ничего не пишем.
Жмём Сохранить
Перетаскиваем мышкой под шапку блога\заголовок.
Сохранить расположение\справа вверху\
Самое трудное сделано ,мы определили место ,где будет жить наше меню.
Гаджет всегда можно отредактировать или удалить ,если вдруг не понравится ,нажав изменить
В гаджет вставляем наше меню .Если вам надо ставить стиль меню отдельно ,читаем первую часть статьи , если вам надо без заморочек переходим ко второй части статьи.
Вариант второй Так же ,как и первый вариант вставляем (или по первому варианту или по второму)в гаджет HTML .Перейти к упрощённому варианту
В гаджет вставляем наше меню .Если вам надо ставить стиль меню отдельно ,читаем первую часть статьи , если вам надо без заморочек переходим ко второй части статьи.
Вариант второй Так же ,как и первый вариант вставляем (или по первому варианту или по второму)в гаджет HTML .Перейти к упрощённому варианту
И забираем код CSS-код стилей ,Кликаем изменить гаджет , вставляем вместо
Кто умеет может изменить стиль ,цвет и т.д. .Кто не умеет , лучше туда не лезть Для изменения лучше копировать в блокнот и там покуражиться ,если спец .Поскольку я чайник , то туда даже и не заглядываю./*Здесь вставляете весь CSS код менюшки*/
Копируем HTML код .И вставляем на место
/* Тут, ниже закрывающего тега</style>вставляете HTML код меню */
Кликаем в гаджете
Сохранить
Смотрим примерное расположение блоков ,какие-то можно убрать ,или скопировать и поставить на место других .Свобода творчества .Благо автор всё подробно расписал -где что в коде.Заменяем названия на свои .Смотрим что получается ,лучше редактировать через блокнот.Ищем
На место # вставляем свои ссылки ,на место link свои названия ссылок .Можно увеличить количество ссылок путём копирования .Тратим вечерок на создание меню и наслаждаемся оным !!!!!!!!!!!!!<a href="#">link</a>
Значит ,если не хотим заморачиваться ,Можно вставить сразу код полностью ,(разделение было сделано для тех ,кто хочет стиль прописать в шаблон .)Скачиваем код здесь это полный код (нажмите на ссылку) ,скачиваем ,копируем всё , вставляем в
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 ставим своё значение
........
С уважением !
Об Авторе
Комментариев нет:
Отправить комментарий