Можно ли go с горизонтальной прокруткой и показать все (с эффектом переключения) одновременно на мобильном представлении

Question

.nav-sec{padding:0;background-color:#fff;border-radius:3px;margin-top:20px;box-shadow:0 0 15px rgba(0,0,0,0.3);position:relative;height:50px;line-height:50px;z-index:994;float:left;width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;}

.nav-sec a.all{float:left;padding:0 15px;}
.nav-sec a.all span{padding:5px 10px;background-color:#b60001;font-size:15px;color:#fff;border-radius:5px;}
.nav-sec ul.menu-items{padding-left:10px;float:left;height:50px;transition:all ease 0.5s;-webkit-transition:all ease 0.5s;-moz-transition:all ease 0.5s;}
.nav-sec ul.last-itm{float:right;width:50px;text-align:right;}
.nav-sec ul.last-itm ul{float:left;text-align:left;margin-top:-2px;}
.nav-sec ul.last-itm ul li:first-child a{padding-left:0;}
.nav-sec ul.last-itm li{display:inline-block;float:none;}
.nav-sec ul.last-itm li a{padding-right:15px;}
.nav-sec ul li{display:inline-block;float:none;}
.nav-sec ul li:nth-last-child(2){display:none;}
.nav-sec ul li a[href="#menu-open"]:hover span, .nav-sec ul li a[href="#menu-closed"]:hover span{background-color:transparent;color:#000}


.nav-sec ul li:last-child{position:absolute;right:0;top:0;padding:0px;}
.nav-sec ul li.last i{color:#b60001;}
.nav-sec ul li a{display:block;padding:0 5px;color:#000;}
.nav-sec ul li a.active span{background-color:#b60001;color:#fff;position:relative;}
.nav-sec ul li a.active span:after{	top: 100%;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;
position: absolute;pointer-events: none;border-color: rgba(136, 183, 213, 0);border-top-color: #b60001;border-width: 6px;margin-left: -6px;}
.nav-sec ul li a:hover span{}
.nav-sec ul li a:hover span{background-color:#b60001;color:#fff;}
.nav-sec ul li a span{padding:5px 10px;font-size:15px;color:#000;border-radius:5px;transition:all ease 0.5s;}
.nav-sec ul .nav-drop{position:absolute;left:0;right:0;top:50px;background-color:#fff;padding-left:0;border-radius:0 0 3px 3px;padding:0 15px;}
.nav-sec#menu-open{height:50px;transition:all ease 0.5s;-webkit-transition:all ease 0.5s;-moz-transition:all ease 0.5s;}
.nav-sec#menu-open:target {height: 100px;padding: 0;}
.nav-sec#menu-open:target ul {max-height: none;}
.nav-sec#menu-open:target a {display: block;}
.nav-sec#menu-open:target a:hover {background-color:transparent;color:#9f0606;}
.nav-sec#menu-open:target li:last-child {display: none;}
.nav-sec#menu-open:target li:nth-last-child(2) {display: inline-block;position: absolute;top: 0;right: 0;margin: 0;}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
				<div class="nav-sec" id="menu-open">
					
					<ul class="menu-items" id="menu-closed">
						
						<li><a href="#" class="active"><span>All</span></a></li>
						<li><a href="#"><span>MBA</span></a></li>
						<li><a href="#"><span>Bank-PO</span></a></li>
						<li><a href="#"><span>GK</span></a></li>
						<li><a href="#"><span>Interview</span></a></li>
						<li><a href="#"><span>Miscellaneous</span></a></li>
						<li><a href="#"><span>Vocab</span></a></li>
						<li><a href="#"><span>Academic Zone</span></a></li>
						<li><a href="#"><span>Placement Training</span></a></li>
						<li><a href="#"><span>Placement Training1</span></a></li>	
						<li><a href="#"><span>Placement Training2</span></a></li>	
						<li><a href="#"><span>Placement Training3</span></a></li>	
						<li><a href="#menu-closed"><span><i class="fa fa-chevron-up"></i></span></a></li>	
						<li><a href="#menu-open"><span><i class="fa fa-chevron-down"></i></span></a></li>	
					</ul>

				</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

.nav-sec {
  padding: 0;
  background-color: #fff;
  border-radius: 3px;
  margin-top: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  position: relative;
  height: 50px;
  line-height: 50px;
  z-index: 994;
  float: left;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.nav-sec#menu-open:target .menu-items {
  white-space: normal;
}

.nav-sec a.all {
  float: left;
  padding: 0 15px;
}

.nav-sec a.all span {
  padding: 5px 10px;
  background-color: #b60001;
  font-size: 15px;
  color: #fff;
  border-radius: 5px;
}

.nav-sec ul.menu-items {
  padding-left: 10px;
  float: left;
  height: 50px;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}

.nav-sec ul.last-itm ul li:first-child a {
  padding-left: 0;
}

.nav-sec ul.last-itm li {
  display: inline-block;
  float: none;
}

.nav-sec ul.last-itm li a {
  padding-right: 15px;
}

.nav-sec ul li {
  display: inline-block;
  float: none;
}

.nav-sec ul li:nth-last-child(2) {
  display: none;
}

.nav-sec ul li a[href="#menu-open"]:hover span,
.nav-sec ul li a[href="#menu-closed"]:hover span {
  background-color: transparent;
  color: #000
}

.nav-sec ul li:last-child {
  right: 0;
  top: 0;
  padding: 0px;
  background-color: #fff;
  position: sticky;
}

.nav-sec ul li.last i {
  color: #b60001;
}

.nav-sec ul li a {
  display: block;
  padding: 0 5px;
  color: #000;
}

.nav-sec ul li a.active span {
  background-color: #b60001;
  color: #fff;
  position: relative;
}

.nav-sec ul li a.active span:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #b60001;
  border-width: 6px;
  margin-left: -6px;
}

.nav-sec ul li a:hover span {}

.nav-sec ul li a:hover span {
  background-color: #b60001;
  color: #fff;
}

.nav-sec ul li a span {
  padding: 5px 10px;
  font-size: 15px;
  color: #000;
  border-radius: 5px;
  transition: all ease 0.5s;
}

.nav-sec ul .nav-drop {
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  background-color: #fff;
  padding-left: 0;
  border-radius: 0 0 3px 3px;
  padding: 0 15px;
}

.nav-sec#menu-open {
  height: 50px;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}

.nav-sec#menu-open:target {
  height: 100px;
  padding: 0;
}

.nav-sec#menu-open:target ul {
  max-height: none;
}

.nav-sec#menu-open:target a {
  display: block;
}

.nav-sec#menu-open:target a:hover {
  background-color: transparent;
  color: #9f0606;
}

.nav-sec#menu-open:target li:last-child {
  display: none;
}

.nav-sec#menu-open:target li:nth-last-child(2) {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="nav-sec" id="menu-open">

  <ul class="menu-items" id="menu-closed">

    <li><a href="#" class="active"><span>All</span></a></li>
    <li><a href="#"><span>MBA</span></a></li>
    <li><a href="#"><span>Bank-PO</span></a></li>
    <li><a href="#"><span>GK</span></a></li>
    <li><a href="#"><span>Interview</span></a></li>
    <li><a href="#"><span>Miscellaneous</span></a></li>
    <li><a href="#"><span>Vocab</span></a></li>
    <li><a href="#"><span>Academic Zone</span></a></li>
    <li><a href="#"><span>Placement Training</span></a></li>
    <li><a href="#"><span>Placement Training1</span></a></li>
    <li><a href="#"><span>Placement Training2</span></a></li>
    <li><a href="#"><span>Placement Training3</span></a></li>
    <li><a href="#menu-closed"><span><i class="fa fa-chevron-up"></i></span></a></li>
    <li><a href="#menu-open"><span><i class="fa fa-chevron-down"></i></span></a></li>
  </ul>

</div>


<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

У меня есть n пунктов меню. Немного видимых предметов, и чтобы сделать невидимые предметы видимыми, я использую переключатель с css. Можно ли сделать горизонтальную прокрутку на мобильном экране вместе с кнопкой просмотра больше. Пользователь может просматривать список элементов с помощью прокрутки, а также с помощью кнопки просмотра больше. Пожалуйста, поддержите

Пожалуйста, обратитесь по URL ниже: https://codepen.io/olach/pen/adeMzP Я хочу, чтобы функциональность была точно такой же, но с одной дополнительной функцией, то есть горизонтальной прокруткой в ​​одно и то же время для просмотра элементов. Так что пользователь может использовать любой из этих методов для доступа к невидимым элементам списка.

Answer 1

Вы пропустили пару css, например

nav-sec#menu-open:target li {
    display: block!important;
}
.nav-sec#menu-open:target a {
  display: block;
}

Фрагмент обновлен до css, пожалуйста, проверьте его. :)

.nav-sec {
  padding: 0;
  background-color: #fff;
  border-radius: 3px;
  margin-top: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  position: relative;
  height: 50px;
  line-height: 50px;
  z-index: 994;
  float: left;
  width: 100%;
  overflow: hidden;
}

.nav-sec a.all {
  float: left;
  padding: 0 15px;
}

.nav-sec a.all span {
  padding: 5px 10px;
  background-color: #b60001;
  font-size: 15px;
  color: #fff;
  border-radius: 5px;
}

.nav-sec ul.menu-items {
  padding-left: 10px;
  float: left;
  max-height: 50px;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}

.nav-sec ul.last-itm {
  float: right;
  width: 50px;
  text-align: right;
}

.nav-sec ul.last-itm ul {
  float: left;
  text-align: left;
  margin-top: -2px;
}

.nav-sec ul.last-itm ul li:first-child a {
  padding-left: 0;
}

.nav-sec ul.last-itm li {
  display: inline-block;
  float: none;
}

.nav-sec ul.last-itm li a {
  padding-right: 15px;
}

.nav-sec li {
  display: inline-block;
  float: none;
}

.nav-sec ul li:nth-last-child(2) {
  display: none;
}

.nav-sec ul li a[href="#menu-open"]:hover span,
.nav-sec ul li a[href="#menu-closed"]:hover span {
  background-color: transparent;
  color: #000
}

.nav-sec ul li:last-child {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0px;
}

.nav-sec ul li.last i {
  color: #b60001;
}

.nav-sec ul li a {
  display: block;
  padding: 0 5px;
  color: #000;
}

.nav-sec ul li a.active span {
  background-color: #b60001;
  color: #fff;
  position: relative;
}

.nav-sec ul li a.active span:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #b60001;
  border-width: 6px;
  margin-left: -6px;
}

.nav-sec ul li a:hover span {}

.nav-sec ul li a:hover span {
  background-color: #b60001;
  color: #fff;
}

.nav-sec ul li a span {
  padding: 5px 10px;
  font-size: 15px;
  color: #000;
  border-radius: 5px;
  transition: all ease 0.5s;
}

.nav-sec ul .nav-drop {
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  background-color: #fff;
  padding-left: 0;
  border-radius: 0 0 3px 3px;
  padding: 0 15px;
}

.nav-sec#menu-open {
  height: 50px;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}

.nav-sec#menu-open:target {
  height: auto;
  padding: 0;
}

.nav-sec#menu-open:target ul {
  max-height: none;
}

.nav-sec#menu-open:target a:hover {
  background-color: transparent;
  color: #9f0606;
}

.nav-sec#menu-open:target li {
  display: block;
}

.nav-sec#menu-open:target a {
  display: block;
}

.nav-sec#menu-open:target li:last-child {
  display: none;
}

.nav-sec#menu-open:target li:nth-last-child(2) {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="nav-sec" id="menu-open">

  <ul class="menu-items" id="menu-closed">

    <li><a href="#" class="active"><span>All</span></a></li>
    <li><a href="#"><span>MBA</span></a></li>
    <li><a href="#"><span>Bank-PO</span></a></li>
    <li><a href="#"><span>GK</span></a></li>
    <li><a href="#"><span>Interview</span></a></li>
    <li><a href="#"><span>Miscellaneous</span></a></li>
    <li><a href="#"><span>Vocab</span></a></li>
    <li><a href="#"><span>Academic Zone</span></a></li>
    <li><a href="#"><span>Placement Training</span></a></li>
    <li><a href="#"><span>Placement Training1</span></a></li>
    <li><a href="#"><span>Placement Training2</span></a></li>
    <li><a href="#"><span>Placement Training3</span></a></li>
    <li><a href="#menu-closed"><span><i class="fa fa-chevron-up"></i></span></a></li>
    <li><a href="#menu-open"><span><i class="fa fa-chevron-down"></i></span></a></li>
  </ul>

</div>