响应式导航变得突出显示flex

时间：2017-01-02 05:23:10

标签： javascript html css navigation flexbox

所以，我试图重新管理我以前的项目并将其更改为flex。由于ul元素是阻塞而导致混乱，我使用JavaScript将其更改为显示flex。

这是小提琴

＆＃13;
＆＃13; 
$(function() {
    var pull        = $('#pull');
        menu        = $('nav ul.clearfix');
        menuHeight  = menu.height();
 
    $(pull).on('click', function(e) {
        e.preventDefault();
		$('#burger').toggleClass('open');
		if ($('#burger').hasClass("open")) {
			$(menu).css("display", "flex");
			$("section").css("z-index", 1);
			menu.slideToggle();
		} else {
			menu.slideToggle('slow', function() {
			$("section").css("z-index", 4);
			});
		}
    });
});
$(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
});
＆＃13; 
header{
width:100%;
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
header #logo{
width:15%;
position:absolute;
top:0;
left:0;
z-index:2;
}
#logo img{
width:100%;
}
header nav{
width:100%;
position:relative;
z-index:1;
}
nav ul.clearfix{
width:100%;
padding:0;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
ul.clearfix a{
list-style:none;
text-decoration:none;
border:solid 2px #e74c3c;
padding:8px 0px;
width:12%;
max-width:300px;
font-size:15px;
color:#e74c3c;
text-align:center;
cursor:pointer;
transition:all 0.3s ease-in-out;
}
ul.clearfix a:nth-child(n+2){
margin-left:-1px;
}
ul.clearfix a:hover{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;
}
ul.clearfix #currentPage{
padding:16px 0px;
text-decoration:none;
color:#e74c3c;
cursor:pointer;	
}

/*default*/
@media screen and (max-width: 768px) {	
header{
	height:50px;
	justify-content:flex-start;
}
nav {
	z-index:2;
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:50px;
	border-bottom: 0; 
	}
nav a#pull{
	line-height:50px;}
nav ul.clearfix {
	width:100%;
	display: none;
	height: auto;
	background:#ccc;
	position:relative;
	flex-direction:column;
	z-index:2;
}
ul.clearfix a{
	border-bottom:1px dotted black;
	font-size:14px;
	width:100%;
	position:relative;
	height:50px;
	text-align:center;
	z-index:2;
}
ul.clearfix a:first-child{
	border-top:1px dotted black;		
	margin-top:50px;
}
nav a#pull {
	display: flex;
	position: absolute;
	align-items:flex-start;
	justify-content:flex-start;
	padding-left:10px;
	right:10px;
	top:5px;
}
nav a#pull:after {
	background:#ccc;
	width: 30px;
	height: 30px;
	display: inline-block;
	position: absolute;
	line-height:50px;
	right:15px;
	top:0px;}

div#burger{
	width:20px;
	height:20px;
	position: absolute;
	right:0px;
	top:0px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	z-index:4;}
div#burger span{
	display: block;
	position: absolute;
	height: 5px;
	width: 100%;
	background: red;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.8s ease-in-out;
	-moz-transition: 0.8s ease-in-out;
	-o-transition: 0.8s ease-in-out;
	transition: 0.8s ease-in-out;
	}
#burger span:nth-child(1){top: 0px;}
#burger span:nth-child(2){top: 7px;}
#burger span:nth-child(3){top: 14px;}	

#burger.open span:nth-child(1){
  top: 7px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#burger.open span:nth-child(2){
  opacity: 0;
  left: -30px;
}

#burger.open span:nth-child(3){
  top: 7px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


}

/*default Portrait*/
@media screen and (max-width: 773px) and (orientation: portrait) {
div#logo{
	width:30%;
}

}
/* iPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

div#logo{
	width:20%;}
	  
}

/* iPad Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
header{
	width:100%;
	height:80px;
}
div#logo {
width: 25%;}
nav {
width: 65%;}
}

/*default Landscape*/
@media screen and (max-width: 773px) and (orientation: landscape) {
div#logo{
	width:20%;
}	
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<header class="sameThisHeight">
		<div id="logo" class="logo">
			<img src="assets/Logo.png">
		</div>
		<nav class="clearfix">
		  <ul class="clearfix">
			<a id="currentPage" href="index.php">HOME</a>
			<a href="registration.php">REGISTRATION</a>
			<a href="tutorial.php">TUTORIAL</a>
			<a href="contact.php">CONTACT US</a>
		  </ul>
		  <a href="#" id="pull">
			<div id="burger">
				<span></span>
				<span></span>
				<span></span>
			</div>
		  </a>
		</nav>
	</header>
＆＃13;
＆＃13;
＆＃13;

事情是，

当我第一次点击汉堡时它来回晃动它就像它有什么问题一样。

第二次打开汉堡时，导航器坍塌了，它确实很好，不，不，它不好，实际上并不好。

不知何故，序列改变了＆＃34; x＆＃34;用于打开导航按钮和＆＃34;汉堡图标＆＃34;关闭导航。绝对不行。

我不知道我做错了什么，正确的事情应该与我所做的相反...＆＃34; x＆＃34;按钮用于关闭导航和＆＃34;汉堡图标＆＃34;打开导航。

我的想法是因为我在JavaScript中插入了这个

$(menu).css("display", "flex");

因为，在我将它添加到我的javascript之前，它表现不错，但不足以与设计相匹配。最后一个项目我做得很好，因为没有使用flex和直接使用UL LI标签。无论如何要解决这个问题，并继续使用flex吗？请帮忙。

1 个答案:

答案 0 :(得分：1)

此行会在首次点击时导致问题。您应该将display: flex放在slideToggle();之后，我应该指出，由于slideToggle();放置display: block;，它不会是平滑过渡。你应该做一个css解决方案，或者围绕<ul>...</ul>创建一个容器。

if ($('#burger').hasClass("open")) {
  //here you set it to be display
  $(menu).css("display", "flex");

  $("section").css("z-index", 1);

  //here you toggle display, which will be flex, so you hide it
  menu.slideToggle(); 
}

更改为（fiddle，我为演示更改了一些样式，您可以自由使用自己的样式）

$(function() {
  var pull = $('#pull');
  menu = $('nav ul.clearfix');
  menuHeight = menu.height();

  $(pull).on('click', function(e) {
    e.preventDefault();
    $('#burger').toggleClass('open');
    if ($('#burger').hasClass("open")) {
      $("section").css("z-index", 1);
      menu.slideToggle();
    } else {
      menu.slideToggle('slow', function() {
        $("section").css("z-index", 4);
      });
    }
  });
});
$(window).resize(function() {
  var w = $(window).width();
  if (w > 320 && menu.is(':hidden')) {
    menu.removeAttr('style');
  }
});

您的html / css存在一些问题，应该重新处理。 <ul>必须包含<li> 

<ul class="clearfix">
  <a id="currentPage" href="index.php">HOME</a>
  <a href="registration.php">REGISTRATION</a>
  <a href="tutorial.php">TUTORIAL</a>
  <a href="contact.php">CONTACT US</a>
</ul>

应该是

<ul class="clearfix">
  <li><a id="currentPage" href="index.php">HOME</a></li>
  <li><a href="registration.php">REGISTRATION</a></li>
  <li><a href="tutorial.php">TUTORIAL</a></li>
  <li><a href="contact.php">CONTACT US</a></li>
</ul>

另外，为什么在不使用float时使用类clearfix？在这种情况下，我从来没有像clearfix类那样定位样式，而是给它一类navigation或者其他东西。

相关问题
最新问题