响应式导航菜单的问题

时间:2017-03-06 16:22:49

标签: javascript jquery html css

我的导航菜单有问题...它适用于台式机和笔记本电脑,但不适用于移动设备。

那么,有人可以帮我吗?

以下是Desktops / Notebooks屏幕中菜单的以下代码:

@media only screen and (min-width: 768px) {
  /*
  / nav
  */
  nav {
    width: 100%;
    background: #000;
    border-bottom: 5px solid white;
    position: relative;
    font-family: 'Decker';
  }
  nav:after {
    content: '';
    height: 8px;
    width: 100%;
    background: inherit;
    position: absolute;
    bottom: -15px;
    left: 0px;
    z-index: 1;
  }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  nav a {
    color: #fff;
    text-decoration: none;
  }

  .nav__cat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 100%;
    margin: auto;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: .6em;
  }

  .nav__li {
    display: inline-block;
    list-style: none;
    position: relative;
    padding: 0 .5em;
  }
  .nav__li:last-child a:before {
    display: none;
  }
  .nav__li:hover > a {
    background: #b42024;
    text-decoration: none;
    color: #fff;
  }
  .nav__li:hover > a:after {
    display: block;
  }
  .nav__li:hover .sub__category {
    visibility: visible;
    opacity: 1;
  }

  .nav__li > a {
    display: inline-block;
    padding: 25.6px 0.6em 0.7em 0.6em;
    position: relative;
    font-size: 18px;
    line-height: 1;
  }
  .nav__li > a:before {
    content: "|";
    display: block;
    position: absolute;
    right: -10px;
    top: 25.6px;
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
    line-height: inherit;
    font-size: inherit;
  }
  .nav__li > a:after {
    display: none;
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0px;
    width: 100%;
    height: 8px;
    background: #fac312;
    z-index: 2;
  }

  .sub__category {
    visibility: hidden;
    opacity: 0;
  }

  .sub__category {
    position: absolute;
    top: 100%;
    left: 0px;
    min-width: 160px;
    width: 100%;
    z-index: 3;
    margin: 0 .5em;
    padding-top: 23px;
    -webkit-transition: all .12s linear;
    transition: all .12s linear;
  }

  .sub__li {
    text-align: center;
    border-bottom: 2px #000 solid;
    background: #b42024;
  }

  .sub__link {
    padding: .7em 1em;
    display: block;
    font-size: 14px;
  }
  .sub__link:hover {
    background: #fff;
    color: #000;
    text-decoration: none;
  }

  nav li a.active {
    background: #b42024;
    color: #fff;
    text-decoration: none;
  }

  nav li a.active:after {
    display: block;
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0px;
    width: 100%;
    height: 8px;
    background: #fac312;
    z-index: 2;
  }

  .sub__li a.active-sub {
    background: #fff;
    color: #000;
    text-decoration: none;
  }
}

input#control-nav {
  visibility: hidden;
  position: absolute;
  left: -9999px;
  opacity: 0;
}
    <header>
        ...
        ...
        ...
    </header>
    
    <input type="checkbox" id="control-nav" />
		<label for="control-nav" class="control-nav"></label>
		<label for="control-nav" class="control-nav-close"></label>
    
    <nav>
				<ul class="nav__cat">
					<li class="nav__li">
						<a href="" class="active">Home</a>
					</li>
					<li class="nav__li">
						<a href="#">Sobre a Gente</a>
						<ul class="sub__category">
							<li class="sub__li">
								<a href="#" class="sub__link">Sub-page</a>
							</li>
							<li class="sub__li">
								<a href="#" class="sub__link">Other sub-page</a>
							</li>
							<li class="sub__li">
								<a href="#" class="sub__link">Another sub-page</a>
							</li>
						</ul>
					</li>
					<li class="nav__li">
						<a href="#">How find us</a>
					</li>
					<li class="nav__li">
						<a href="#">Contact us</a>
					</li>
				</ul>
      </nav>

我尝试在响应中转换此菜单...我得到了这个:

@media (max-width: 767px) {
	
	.control-nav { /* label icon */
    position: absolute;
    right: 20px;
    top: 20px;
    display: block;
    width: 30px;
    padding: 5px 0;
    border: solid #333;
    border-width: 3px 0;
    z-index: 2;
    cursor: pointer;
  }

  .control-nav:before {
    content: "";
    display: block;
    height: 3px;
    background: #333;
  }

  .control-nav-close {
    position: fixed; /* label layer */
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1;
    background: rgba(0,0,0,0.4);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }

  /* checked nav */
  input#control-nav {
    visibility: visible;
  }

  input#control-nav:focus ~ .control-nav {
    border-color: #000;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
  }

  input#control-nav:focus ~ .control-nav:before {
    background: #000;
  }

  input#control-nav:checked ~ nav,
  input#control-nav:checked ~ .control-nav-close {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
	
	/*
	/ nav
	*/
	nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 250px;
		border-left: 1px solid #ccc;
		background: #fff;
		overflow-x: auto;
		z-index: 2;
		-webkit-transition: all 500ms ease;
		transition: all 500ms ease;
		-webkit-transform: translate(100%, 0);
		-ms-transform: translate(100%, 0);
		transform: translate(100%, 0);
	}
	
	nav ul {
		list-style: none;
		background: #1c1c1c;
		padding: 5px 0;
	}
 
	nav li a {
		display: block;
		padding: 0 20px;
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		letter-spacing: 0.1em;
		line-height: 2em;
		height: 2em;
		border-bottom: 1px solid #383838;
	}
 
	nav li:last-child a {
		border-bottom: none;
	}
 
	nav li a:hover,
	nav li a:focus {
		color: #1c1c1c;
		background: #ccc;
	}
	
	
}
    <header>
        ...
        ...
        ...
    </header>
    
    <input type="checkbox" id="control-nav" />
		<label for="control-nav" class="control-nav"></label>
		<label for="control-nav" class="control-nav-close"></label>
    
    <nav>
				<ul class="nav__cat">
					<li class="nav__li">
						<a href="" class="active">Home</a>
					</li>
					<li class="nav__li">
						<a href="#">Sobre a Gente</a>
						<ul class="sub__category">
							<li class="sub__li">
								<a href="#" class="sub__link">Sub-page</a>
							</li>
							<li class="sub__li">
								<a href="#" class="sub__link">Other sub-page</a>
							</li>
							<li class="sub__li">
								<a href="#" class="sub__link">Another sub-page</a>
							</li>
						</ul>
					</li>
					<li class="nav__li">
						<a href="#">How find us</a>
					</li>
					<li class="nav__li">
						<a href="#">Contact us</a>
					</li>
				</ul>
      </nav>

我很感激帮助!

哦,对不起我的英语!,这不太好。

0 个答案:

没有答案