Question

桌面或平板电脑上的垂直菜单向左打开。它在较小的屏幕上打开。我已经设法为宽屏幕获得所需的半径。在小屏幕上打开之前，半径显示正确。但是，当它在小屏幕上打开时，半径仍然在底部，但不在顶部。单击底部链接时，底部半径也会消失。 jsfiddle是http://jsfiddle.net/hozey/yrefmf9u/

    <style class="cp-pen-styles">
body {
  font-family: sans-serif;
  color: #fff;
}

nav a {
  color: #fff;
  text-decoration: none;
}

body a:hover { color: #fff; }

nav { background-color: #2c3e50; 
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-radius-topleft:10px;
  -webkit-border-radius-topright:10px;
  border-top-right-radius:10px;
  border-top-left-radius:10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-radius-bottomleft:10px;
  -webkit-border-radius-bottomright:10px;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px; 
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 10px;
  -webkit-border-radius-topleft:0px;
  -webkit-border-radius-topright:10px;
  border-top-right-radius:10px;
  border-top-left-radius:0px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-radius-bottomleft:10px;
  -webkit-border-radius-bottomright:10px;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
}
nav li,
nav .nav-toggle {
  text-align: center;
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
}
nav .dropdown > a:after {
  content: 'V';
  position: absolute;
  right: 15px;
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}
nav .dropdown.open,
.desktop nav li:hover { background-color: #34495e; }

nav .dropdown.open > a:after,
.desktop nav li:hover > a:after {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
nav .dropdown ul {
  position: relative;
  background-color: #34495e;
  display: none;
}
nav a {
  display: block;
  padding: 10px 15px;
}

/***** DESKTOP *****/
.desktop nav { width: 150px;
}

.desktop nav li {
  text-align: left;
  width: 150px;
}

.desktop nav li:hover ul {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  visibility: visible;  
}

.desktop nav .dropdown:hover > a:after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); 
}

.desktop nav .dropdown > a:after {
  content: '>';
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.desktop nav .dropdown ul {
  top: 0;
  left: 150px;
  position: absolute;
  display: block !important;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.desktop nav .nav-toggle {
display: none;  
}

</style>

请告诉我如何获得小屏幕视图的顶部和底部半径。谢谢。

Answer 1

http://jsfiddle.net/yrefmf9u/6/

请务必与调试器（开发人员工具）联系，了解干扰内容。

jQuery代码在<div>元素的位置切换并显示<nav>，并且div没有半径。幸运的是，它有一个类名：nav-toggle。您也可以使用此课程并将border-radius应用于此课程。这些是我写的相关规则 - 它应该适用于台式机和移动设备：

.nav-toggle, nav{
    border-radius:10px;
}

.nav-toggle.open{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

nav li:first-child{
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

nav li:last-child{
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

nav li.dropdown:not(.open):last-child{
    border-bottom-right-radius:0;
}

将Radius添加到下拉列表

1 个答案: