Статьи

Как создать эффектное меню с помощью CSS

Декабрь 2, 2018

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

Скачать демо и источник

Конечный результат:

HTML

Наш HTML-документ содержит неупорядоченный список, и каждый элемент списка является ссылкой с тегом привязки. Диапазон содержит название пункта меню. 

<ul class="main-ul">
        		<li><a href="#"><span>Home</span></a></li>
        		<li><a href="#"><span>Article</span></a></li>
        		<li><a href="#"><span>Blog</span></a></li>
       		 <li><a href="#"><span>Gallery</span></a></li>
       		 <li><a href="#"><span>About</span></a></li>
        		<li><a href="#"><span>Contact Us</span></a></li>
        		<li><a href="#"><span>Alumini</span></a></li>
       		 <li><a href="#"><span>Portfolio</span></a></li>
	 </ul>

CSS

Я использую шаблон для фона нашей страницы из SubtlePatterns . 

 body{
		background: #eee url(../images/white_paperboard.png) repeat top right;
	}

Теперь давайте разместим пункты списка меню. Я использую ширину 25% для каждого элемента, поэтому в каждом ряду можно расположить четыре элемента меню. Я выравниваю текст каждого элемента списка по центру. 

 .main-ul li {
		  float:left;
  		  position:relative;
   		  width:25%;
  		  text-align:center;
  	}

Далее давайте разместим каждый тег привязки и изменим текстовое оформление на none. Я использую светло-серый цвет фона. Я также добавляю эффекты перехода CSS3 к этим элементам длительностью в одну секунду. 

 .main-ul li a {
	                      display:block;
		    padding-bottom:20px;
		    padding-right:10px;
		    padding-top:10px;
		    padding-left:10px;
	 	    text-decoration:none;
		    position: relative;
	 	    z-index: 100;
		    background-color: rgba(164, 164, 164, 0.2);
	  	   -webkit-transition: all 1s;
	 	   -moz-transition: all 1s;
	  	   -o-transition: all 1s;
	  	   transition: all 1s;
	   }

Я использую шрифт «Kotta One» для текста span, нормальный размер шрифта и вес 20px и 700 соответственно. Я сделал цвет шрифта для текста в состоянии наведения белым. 

 .main-ul li a span{
		          display:block;
		          padding-top:10px;
		          font-weight:700;
		          font-size: 20px;
		          color: rgba(120, 120, 120, 0.9);
		          text-transform:uppercase;
		          font-family: 'Kotta One', serif;
 	}

	.main-ul li:hover span{
		                  color: #fff;
	}

Вот наша основная часть, я уже добавил эффект перехода для тегов привязки. Теперь добавьте эффекты наведения для каждого элемента списка тегов привязки, изменив его цвет фона. Поэтому, когда кто-то наводит указатель мыши на каждый элемент меню списка, он меняет цвет фона на новый. Я также добавляю эффекты поворота CSS3 на 3 градуса. 

 .main-ul li:nth-child(1):hover a{
			              background-color: rgba(175,54,55,0.8);
			              -moz-transform: rotate(-3deg);
			              -webkit-transform: rotate(-3deg);
			              -o-transform: rotate(-3deg);
			               transform: rotate(-3deg);
	}

Теперь повторите этот шаг для всех элементов списка с новым цветом фона на ваш выбор! 

 .main-ul li:nth-child(2):hover a{
				background-color: rgba(199, 204, 73, 0.8);
				-moz-transform: rotate(-3deg);
				-webkit-transform: rotate(-3deg);
				-o-transform: rotate(-3deg);
				transform: rotate(-3deg);
	}
	.main-ul li:nth-child(3):hover a{
				background-color: rgba(213, 135, 11, 0.8);
				-moz-transform: rotate(3deg);
				-webkit-transform: rotate(3deg);
				-o-transform: rotate(3deg);
				transform: rotate(3deg);
	}
	.main-ul li:nth-child(4):hover a{
				background-color: rgba(51, 143, 144, 0.8);
				-moz-transform: rotate(3deg);
				-webkit-transform: rotate(3deg);
				-o-transform: rotate(3deg);
				transform: rotate(3deg);
	}
	.main-ul li:nth-child(5):hover a{
				background-color: rgba(117,18,98,0.8);
				-moz-transform: rotate(-3deg);
				-webkit-transform: rotate(-3deg);
				-o-transform: rotate(-3deg);
				transform: rotate(-3deg);
	}
	.main-ul li:nth-child(6):hover a{
				background-color: rgba(33, 136, 215, 0.8);
				-moz-transform: rotate(-3deg);
				-webkit-transform: rotate(-3deg);
				-o-transform: rotate(-3deg);
				transform: rotate(-3deg);
	}
	.main-ul li:nth-child(7):hover a{
				background-color: rgba(109, 109, 109, 0.8);
				-moz-transform: rotate(3deg);
				-webkit-transform: rotate(3deg);
				-o-transform: rotate(3deg);
				transform: rotate(3deg);
	}
	.main-ul li:nth-child(8):hover a{
				background-color: rgba(152, 120, 92, 0.8);
				-moz-transform: rotate(3deg);
				-webkit-transform: rotate(3deg);
				-o-transform: rotate(3deg);
				transform: rotate(3deg);
	}

Вот и все, мы выполнили простое броское меню, так что когда кто-то наводит курсор мыши на наши пункты меню одновременно, он меняет цвет фона и слегка поворачивается. Спасибо за прочтение!

34
Share: