1

.topmenu {
  width: 90%;
  height: 35px;
  background: linear-gradient(to top, #202020, #454545);
  border-radius: 5px;
  margin-left: 5%;
  margin-right: 5%;
}

.a {
  margin: 0;
  font-family: Helvetica;
  font-size: 22px;
  color: #e3e3e3;
  3 text-align: center;
  font-style: normal;
  color: white;
  text-decoration: none;
}

.menu2 {
  display: inline-block;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 4px;
  padding-bottom: 5px;
}

.menu3 {
  display: inline-block;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 4px;
  padding-bottom: 5px;
}

.menu4 {
  display: inline-block;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 4px;
  padding-bottom: 5px;
}

.menu5 {
  display: inline-block;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 4px;
  padding-bottom: 5px;
}

.menu6 {
  display: inline-block;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 4px;
  padding-bottom: 5px;
}

.menu1 {
  display: inline-block;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 4px;
  padding-bottom: 5px;
}

.menu1:hover {
  transition: 0.5s;
  background-color: #b83c2e;
  border-radius: 5px 0 0 5px;
}

.menu2:hover {
  transition: 0.5s;
  background-color: #b83c2e;
}

.menu3:hover {
  transition: 0.5s;
  background-color: #b83c2e;
}

.menu4:hover {
  transition: 0.5s;
  background-color: #b83c2e;
}

.menu5:hover {
  transition: 0.5s;
  background-color: #b83c2e;
}

.menu6:hover {
  transition: 0.5s;
  background-color: #b83c2e;
}

.menu5::not(:hover) {
  transition: 0.5s;
}

.menu4::not(:hover) {
  transition: 0.5s;
}

.menu3::not(:hover) {
  transition: 0.5s;
}

.menu2::not(:hover) {
  transition: 0.5s;
}

.menu1::not(:hover) {
  transition: 0.5s;
}

.menu6::not(:hover) {
  transition: 0.5s;
}

.menu1::active {
  background-color: #b83c2e;
}

.menu7 {
  float: right;
  padding-right: 25px;
  padding-top: 4px;
  padding-bottom: 5px;
}
<div class="topmenu">
  <div class="menu1">
    <a href="#" class="a">Home</a>
  </div>
  <div class="menu2">
    <a href="#" class="a">About Us </a>
  </div>
  <div class="menu3">
    <a href="#" class="a">Our services</a>
  </div>
  <div class="menu4">
    <a href="#" class="a">Deposits</a>
  </div>
  <div class="menu5">
    <a href="#" class="a">FAQs</a>
  </div>
  <div class="menu6">
    <a href="#" class="a">Contact us</a>
  </div>
  <div class="menu7">
    <a href="tel:(2457) 555 222 333" class="a">Call Us: (2457) 555 222 333</a>
  </div>
</div>

Вообщем, вот так реализовал меню , можно ли как то с помощью псевдокласов сделать по другому, что бы было меньше кода? Если можно , то как?

2
  • 1
    если ответ решил вашу проблему то примите его нажав на галочку.
    – Randall
    13 фев 2018 в 20:36
  • @Dyxa Посмотрите вот этот вариант, недавно человеку отвечал, тоже может поможет больше понять, что к чему: ru.stackoverflow.com/questions/780546/… Тут конечно JS, но как-раз вариант самый простой.
    – user262779
    13 фев 2018 в 21:09

1 ответ 1

2

.topmenu {
	width: 90%;
	height: 35px;
	background: linear-gradient(to top,#202020,#454545);
	border-radius: 5px;
	margin-left: 5%;
	margin-right: 5%; 
}
.a {
	margin: 0;
	font-family: Helvetica;
	font-size: 22px;
		color: #e3e3e3;3	text-align: center;
	font-style: normal;
	color: white;
	text-decoration: none;
}
.menu1, .menu2, .menu3, .menu4, .menu5, .menu6{
	display: inline-block;
	padding-right: 25px; 
	padding-left: 25px;
	padding-top: 4px;
	padding-bottom: 5px;
}
.menu1:hover, .menu2:hover, .menu3:hover,
.menu4:hover, .menu5:hover, .menu6:hover{
	 transition: 0.5s;
	background-color: #b83c2e;
	border-radius: 5px 0 0 5px;
}
.menu1::not(:hover), .menu2::not(:hover), .menu3::not(:hover),
.menu4::not(:hover), .menu5::not(:hover), .menu6::not(:hover)
{
	 transition: 0.5s; 
}
.menu1::active{
	background-color: #b83c2e;
}
.menu7 {
	float: right;
	padding-right: 25px;
	padding-top: 4px;
	padding-bottom: 5px;
}
<div class="topmenu">
  <div class="menu1">
    <a href="#" class="a">Home</a>
  </div>
  <div class="menu2">
    <a href="#" class="a">About Us </a>
  </div>
  <div class="menu3">
    <a href="#" class="a">Our services</a>
  </div>
  <div class="menu4">
    <a href="#" class="a">Deposits</a>
  </div>
  <div class="menu5">
    <a href="#" class="a">FAQs</a>
  </div>
  <div class="menu6">
    <a href="#" class="a">Contact us</a>
  </div>
  <div class="menu7">
    <a href="tel:(2457) 555 222 333" class="a">Call Us: (2457) 555 222 333</a>
  </div>
</div>

4
  • 1
    А зачем вообще классы menu1,2,3... если они одинаковые, можно в один объединить. 13 фев 2018 в 20:50
  • @ДмитрийПолянин да в один обьеденить можно. алтернативно можно было использовать селектор [атрибут*="значение"] но это бы сбил с толку начинаюшего программиста.
    – Randall
    13 фев 2018 в 20:52
  • А как с помощью атрибута и значения сделать? Попытаюсь разобраться
    – Andrii
    14 фев 2018 в 20:48
  • в вашем случае сделать надо так [style*="menu"] {//и стили которое надо чтобы применялись ко всем "menu"} написать.
    – Randall
    14 фев 2018 в 20:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.