Реализация пунктов меню в border-radius

224

04 июля 2018, 14:10

Каким образом можно реализовать подобное меню (+ аналогично выделяется текущий пункт меню, по ссылке которого мы перешли).

Answer 1

Средствами CSS никак, нужен скрипт.

Один из вариантов:

$('.one a').click(function(){ 
var _active = $(this).closest('ul'); 
 
_active.find('.active').removeClass('active'); 
_active.find('.active-prev').removeClass('active-prev'); 
 
 
$(this).closest('li').addClass('active'); 
$(this).closest('li').prev('li').addClass('active-prev'); 
})

ul { 
  list-style: none; 
  margin: 0 auto; 
  font-size: 0; 
} 
 
a { 
  text-decoration: none; 
  transition: .5s linear; 
} 
 
.one ul { 
  padding: 10px 0; 
} 
 
.one li { 
  display: inline; 
} 
 
.one a { 
  padding: 10px; 
  background: red; 
  color: white; 
  font-size: 16px; 
  border-left: 1px solid red; 
  border-right: 1px solid red; 
} 
 
.one a:hover { 
  background: crimson; 
} 
 
.one li.active a{ 
  border-radius: 10px 10px 0 0; 
  border-left: 1px solid white; 
  border-right: 1px solid white; 
} 
.one li.active + li a{ 
  border-radius: 10px 0 0 0;  
} 
 
.active-prev a{ 
   border-radius: 0 10px 0 0;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<nav class="one"> 
  <ul> 
    <li class='active-prev'><a href="#">Home</a></li> 
    <li class="active"><a href="#">Work</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Blog</a></li> 
    <li><a href="#">Contact</a></li> 
  </ul> 
</nav>

Answer 2

$(document).ready(function() { 
  $('.menu .qwe').hover(function() { 
    $(this).prev().toggleClass('left-border'); 
    $(this).next().toggleClass('right-border'); 
  }); 
});

* { 
  font-size: 20px; 
  list-style: none; 
  margin-left: 0; 
} 
 
.qwe { 
  background: coral; 
  text-align: center; 
  height: 50px; 
  height: 2em; 
  line-height: 2em; 
} 
 
li:hover { 
  border-top-left-radius: 10px; 
  border-top-right-radius: 10px; 
} 
 
.left-border { 
  border-top-right-radius: 10px; 
} 
 
.right-border { 
  border-top-left-radius: 10px; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>Document</title> 
</head> 
 
<body> 
  <ul style="display:flex; " class="menu"> 
    <li class="qwe" style="width: 100px">Item 1</li> 
    <li class="qwe" style="width: 100px">Item 2</li> 
    <li class="qwe" style="width: 100px">Item 3</li> 
    <li class="qwe" style="width: 100px">Item 4</li> 
    <li class="qwe" style="width: 100px">Item 5</li> 
  </ul> 
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
  <script src="main.js"></script> 
</body> 
 
</html>