CSS/JS/Jquery-用于响应屏幕尺寸的Flex项目 [英] CSS/JS/Jquery - Flex items for responsive screen sizes

问题描述

我有一个网站的导航中有3个项目，我想保留在一行上.

I have a site with 3 items in my navigation which I want to remain on one line.

• 第一个是主菜单，具有主站点链接，应 在导航栏的左侧.
• 第二个是联系方式 应该在导航栏中居中.
• 第三个是auth菜单， 其中具有登录/帐户链接等，应位于 导航栏.

• The first is the main menu which has the main site links and should be to the left of the nav bar.
• The second is contact information which should be centered in the nav bar.
• The third is the auth menu, which has sign in/account links etc, which should be to the right of the nav bar.

#nav{
  height:50px;
  width:100%;
  position:relative;
  display:flex; 
}
ul{
  display:inline-block;
  height:50px;
  line-height:50px;
  list-style:none;
}
li{
  display:inline-block;
}
#main_menu{
  flex:3;
  text-align:left;
}
#header_numbers{
  flex:4;
  text-align:center;
}
#auth_menu{
  flex:3;
  text-align:right;
}

<div id="nav">
<ul id="main_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
<ul id="header_numbers">
  <li>menu item 1</li>
  <li>menu item 2</li>
</ul>
<ul id="auth_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
</div>

如果屏幕太小，不同的菜单将落到另一行，但是我想发生的是将联系信息隐藏在中间的菜单中，并且左右只有两个菜单，所以所有内容都保留在一个菜单上线.

If the screen gets too small the different menus will drop to another line but what I want to happen is hide the one in the center with the contact info and only have the two menus to the right and left so everything remains on one line.

我不确定是否有一种方法可以仅使用CSS来实现，除非我执行类似@media only screen and (max-width: 500px)的查询，但我希望将这些查询的数量保持在移动/台式机的最低要求，而不是在运行时添加其他查询仅针对一种特定元素使用不同的大小.

I'm not sure if there is a way to achieve this with just CSS unless I do a query like @media only screen and (max-width: 500px) but I'd rather just keep these queries to a minimum for mobile/desktop rather than having additional queries at different sizes just for one specific element.

对此将提供任何帮助或帮助.

Any help or assistance with this would be greatly appreciated.

推荐答案

如果您不想使用媒体查询，可以使用Javascript/jQuery，但我认为最好使用媒体查询.

If you don't want to use media query's you could use Javascript/jQuery but I think you are better off with media queries for this.

但是，如果您愿意，这是jQuery解决方案:

However this is a jQuery solution if you prefer that:

在窗口load和resize事件上放置事件处理程序，以检查窗口是否等于或等于500.如果该条件为true，则隐藏#header_numbers元素，如果为false则显示

Put a event handler on the window load and resize events that check if the window with is equal or the same to 500. If that condition is true then hide the #header_numbers element, if it false show it.

$(window).on('load resize', function(){
  if($(window).width() <= 500) {
    $('#header_numbers').hide();
  }
  else {
    $('#header_numbers').show();
  }
  
  /* Alternative notation use what you prefer
  $(window).width() <= 500 ? $('#header_numbers').hide() : $('#header_numbers').show();
  */
});

#nav{
  height:50px;
  width:100%;
  position:relative;
  display:flex; 
}
ul{
  display:inline-block;
  height:50px;
  line-height:50px;
  list-style:none;
}
li{
  display:inline-block;
}
#main_menu{
  flex:3;
  text-align:left;
}
#header_numbers{
  flex:4;
  text-align:center;
}
#auth_menu{
  flex:3;
  text-align:right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul id="main_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
<ul id="header_numbers">
  <li>menu item 1</li>
  <li>menu item 2</li>
</ul>
<ul id="auth_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
</div>

这篇关于CSS/JS/Jquery-用于响应屏幕尺寸的Flex项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！