Иконка меню с анимацией при помощи CSS3


Теперь вы можете создать иконку под меню сайта, как на стандартную ширину, так и под мобильную адаптивность, что идет на HTML и CSS3. Также, чтоб была анимация, здесь добавляем стилистику и jQuery, где будет производится красивая анимация, что производится при клике на кнопку. Также не забываем, что высоту и ширину вы задаете кнопки самостоятельно. 

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


Красивая кнопка с открытием меню сайта 

Приступаем у установке: 

HTML 

Код
<code><a id="zornet_ru_ksanimga" href="http://zornet.ru"><span></span></a></code>


CSS 



Код


<code>#zornet_ru_ksanimga {position: relative; display: inline-block; width:35px; height:25px;} 



#zornet_ru_ksanimga span { position: absolute; left: 0; top: 10px; } 

#zornet_ru_ksanimga span,  

#zornet_ru_ksanimga span:before, 

#zornet_ru_ksanimga span:after { 

  position: absolute; 

  display: block; 

  content: ''; 

  height: 5px; 

  width: 35px; 

  background: white; 

  border-radius: 1px; 

  cursor: pointer; 


#zornet_ru_ksanimga span:before { 

  top: -10px; 


#zornet_ru_ksanimga span:after { 

  bottom: -10px;  



#zornet_ru_ksanimga span, #nav-toggle span:before, #zornet_ru_ksanimga span:after { 

  transition: all 500ms ease-in-out; 



#zornet_ru_ksanimga.active span { 



  background-color: transparent; 





#zornet_ru_ksanimga.active span:before, #zornet_ru_ksanimga.active span:after { 



  top: 0; 





#zornet_ru_ksanimga.active span:before { 



  transform: rotate(45deg); 







#zornet_ru_ksanimga.active span:after { 



  transform: rotate(-45deg); 



}</code>




jQuery 



Код

<code>$('#zornet_ru_ksanimga').click(function(){ 



  $(this).toggleClass('active'); 



});</code>




По резултату вы получаете анимационную кнопку под функционал. 


Комментариев 0
Привет, оставишь комментарий?
Имя:*
E-Mail:


Внимание!

Пожертвование
Мы принимаем WebMoney

R807857153548
Z417987712394
B281910665473
Обновления new
  • Переход направление вверх и вниз на CSS
  • Эффект направление вверх и вниз выпадающего списка, который создан при помощи CSS, где может скрыть информацию и по клику открыть список.

  • Wonde - универсальный бизнес шаблон для uCoz
  • Бесплатный новостной шаблон сайта в стиле минимализма. Хорошее решение для ведения своего блога или портала новостей. Все чисто и аккуратно.&nbs ..

  • Горизонтальный топ пользователей по репутации для uCoz
  • Топ пользователей по репутации как на RootGames.Ru на данный момент, пример можете увидеть в персональной странице пользователя в са ..

  • Переключатель с использованием CSS и JS
  • Думаю многим интересно процесс создания оригинальных переключателей, которые можно увидеть на любом тематическом сайте под функцией.

  • Выпадающее горизонтальное меню с помощью CSS
  • По сути выпадающее меню или навигация представляет собой горизонтальный список разнообразных, но скорей всего тематических запросов под параметр ..

Информация