修复了导航问题

【问题标题】：Fixed nav issues修复了导航问题
【发布时间】：2014-11-19 02:06:35
【问题描述】：

我有一个客户想要两个自定义导航菜单相互堆叠，并位于一个滑块下方，其徽标位于中心。他们还希望菜单在滚动时固定。我已经执行了这个，它的效果非常好。这是链接...DEMO

现在难题就在这里。虽然这在任何超过 1200 像素的设备上看起来都很棒，但对于我的生活，我无法弄清楚如何让它在低于 1200 像素的设备上看起来很棒。我已经在几乎所有的代码中添加了媒体查询，但我仍然注意到。除此以外，我已使页面上的其他所有内容都具有响应性。也许删除固定菜单是较小设备的一种选择？？？任何帮助将不胜感激。这是代码....顺便说一句，我知道代码很草率而且很丰富，欢迎提出任何清理它的建议....

HTML

<div id="nav-container">

<div id="nav-box" class="animated fadeInDown">

<a class="btn rounded butter" href="#">Start Dinating</a>
<a class="btn rounded butter" href="#">Follow Us</a>
<a class="btn rounded butter" href="#"><i class="icon-facebook"></i></a>
<a class="btn rounded butter" href="#"><i class="icon-twitter"></i></a>  
<a class="btn rounded butter" href="#"><i class="icon-instagram"></i></a> 
<a class="list-group-item" href="#"></a>
<img src="http://www.jshuadvd.com/test/wp-content/uploads/2014/11/logo.png" alt="Dinate" width="199" height="204">
<a class="btn2 rounded butter" href="#">Merchandise</a>
<a class="btn2 rounded butter" href="#"><i class="icon-lock"></i>Log In / Register</a>
<a class="btn2 rounded butter" href="#"><i class="icon-shopping-cart"></i>View Tab</a>

</div>

<nav id="second-nav">

<div id="nav-left">
    <ul>
    <li><a href="#">HOME </a></li>
    <li><a href="#">OUR RESTAURAUNTS </a></li>
    <li><a href="#">DINATING EVENTS </a></li>
    </ul>
</div>

<div id="nav-right">
    <ul>
    <li><a href="#">CONTACT </a></li>
    <li><a href="#">BLOG </a></li>
    <li><a href="#">CHARITES </a></li>
    </ul>
</div>

</nav>
</div>
</div>

CSS

            #nav-container {
              height: 180px;
              text-decoration: none;
              font-size: 15px;
              font-family: helvetica, arial, sans-serif;
              text-transform: uppercase;
            }


            @media screen and (max-width: 1200px){
              #nav-container {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               font-size: 12px;
               }
            }


            #nav-box {
              position: relative;
              background: #222;
              text-align: center;
              width: 100%;
              height: 50px;
              z-index: 2000;
              padding-top: 0px;
              padding-bottom: 5px;
              line-height: 0;

            }


            @media screen and (max-width: 1200px){
              #nav-box {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }


            #nav-box img {
              position: absolute;
              top: 0;
              left: 50%;
              margin-left: -100px;
            }


            @media screen and (max-width: 1200px){
              #nav-box img {
               display: none;

               }

            }



            /* --------------------- BUTTTONS ------------------- */



            .btn {
              overflow: hidden;
              position: relative;
              display: inline-block;
              height: 2em;
              line-height: 2em;
              padding: 0 1em;  
              left: -7.5%; 
              margin: 10px 30px 0 0; 
              -moz-transition: color 400ms;
              -o-transition: color 400ms;
              -webkit-transition: color 400ms;
              transition: color 400ms;
              }


            @media screen and (max-width: 1200px){
              .btn {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               font-size: auto;
               }

            }


            .btn2 {
              overflow: hidden;
              position: relative;
              display: inline-block;
              height: 2em;
              line-height: 2em;
              padding: 0 1em;  
              left: 9.8%; 
              margin: 10px 30px 0 0; 
              -moz-transition: color 400ms;
              -o-transition: color 400ms;
              -webkit-transition: color 400ms;
              transition: color 400ms;
            }


            @media screen and (max-width: 1200px){
              .btn2 {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               font-size: auto;
               }

            }


            .btn:before {
              content: '';
              position: absolute;
              z-index: -1;
              height: 0%;
              width: 100%;
              bottom: 0;
              left: 0;
              -moz-transition: height 100ms;
              -o-transition: height 100ms;
              -webkit-transition: height 100ms;
              transition: height 100ms;
              }

            @media screen and (max-width: 1200px){
              .btn:before {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }


            .btn2:before {
              content: '';
              position: absolute;
              z-index: -1;
              height: 0%;
              width: 100%;
              bottom: 0;
              left: 0;
              -moz-transition: height 100ms;
              -o-transition: height 100ms;
              -webkit-transition: height 100ms;
              transition: height 100ms;
              }


            @media screen and (max-width: 1200px){
              .btn2:before {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }



            .btn:hover {
              color: #A4C739;
              border-color: #A4C739;
              }


            .btn2:hover {
              color: #A4C739;
              border-color: #A4C739;
              }


            .btn:hover:before {
              height: 100%;
              }


            .btn2:hover:before {
              height: 100%;
            }

            .rounded {
              border-radius: 2em;
            }

            @media screen and (max-width: 1200px){
              .rounded {
               box-sizing: border-box;
               border-radius: auto;
               width:auto;

               }

            }

            .butter {
              color: white;
              border: 3px solid white;
              border-radius: 2em;
            }

            @media screen and (max-width: 1200px){
              .butter {
               box-sizing: border-box;
               border-radius: auto;
               width:auto;

               }

            }


            .butter:before {
              background-color: #A4C739;
            }

            @media screen and (max-width: 1200px){
              .butter:before {
               box-sizing: border-box;
               width:auto;

               }

            }

            .butter:hover {
              color: white;
              border-color: white;
            }



            /* ---------------- SOCIAL NAV ICONS ------------------ */

            .icon-facebook {
              margin-left: -10px;
              margin-right: -10px;
            }

            @media screen and (max-width: 1200px){
              .icon-facebook {
               box-sizing: border-box;
               width: auto;
               }

            }

            .icon-twitter {
              margin-left: -10px;
              margin-right: -10px;
            }

            @media screen and (max-width: 1200px){
              .icon-twitter {
               box-sizing: border-box;
               width:auto;
               }

            }

            .icon-instagram {
              margin-left: -10px;
              margin-right: -10px;
            }

            @media screen and (max-width: 1200px){
              .icon-instagram {
               box-sizing: border-box;
               width: auto;
               }

            }


            /* ---------------- BUTTON ICONS ------------------ */

            .icon-shopping-cart {
              margin-right: 6px;
              margin-left: -4px;
            }

            @media screen and (max-width: 1200px){
              .icon-shopping-cart {
               box-sizing: border-box;
               width:auto;
               }

            }

            .icon-lock {
              margin-right: 5px;
              margin-left: -4px;
            }


            @media screen and (max-width: 1200px){
              .icon-lock {
               box-sizing: border-box;
               width:auto;
               }

            }


            .clear {
              clear: both;

              }


            /* ---------------- BUTTONS END ------------------ */


            /* ---------------- SECOND NAV ------------------- */
              #second-nav {
              width: 100%;
              text-align: center;
              font-size: 15px;
              font-family: helvetica, arial, sans-serif;
              text-transform: uppercase;  
              z-index: 999;
              }



            @media screen and (max-width: 1200px){
              #second-nav {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               font-size: 12px;
               }

            }


            /* ----------------- LEFT NAV ------------------- */


            #nav-left {
              z-index: 1;
              margin-bottom: -92px; /* nav height */
              padding: 5px 60px;
              background: #000;
              transition: box-shadow 400ms; 
            }

            @media screen and (max-width: 1200px){
              #nav-left {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }

            #nav-left ul {
              margin:0 auto;
              width:100%;
              list-style: none;
              *zoom: 1;
            }


            @media screen and (max-width: 1200px){
              #nav-left ul {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }

            #nav-left ul:after {
                clear:both;
                display: table;
                content: "";
            }


            @media screen and (max-width: 1200px){
              #nav-left ul:after {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }


            #nav-left li {
              float: left;
              text-align: center;
              padding: 0 45px;
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              border-radius: 4px;
              list-style: none;
              border-left:1px solid #222;
            }


            @media screen and (max-width: 1200px){
              #nav-left li {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               border: none;
               }

            }


            #nav-left li:first-child {
              border-left: 0;
              padding-left: 0;
             }


            #nav-left a {
              position: relative;
              display:block;   
              color: #fff;
              padding: 40px 0;
              line-height: 1px;
              text-decoration: none;
              -moz-border-radius: 4px;
              -webkit-border-radius: 4px;
              border-radius: 4px; 
            }


            @media screen and (max-width: 1200px){
              #nav-left a {
               box-sizing: border-box;
               width:100%;
               border: none;
               }

            }    

              #nav-left a:hover {
              color: #A4C739;
            } 


            .clear {
            clear: both;

            }


            /* --------------- RIGHT NAV ---------------- */

            #nav-right {
              z-index: 1;
              margin-bottom: -72px; /* nav height */
              padding: 0 120px; 
              background: #000;
              transition: box-shadow 400ms; 
            }

            @media screen and (max-width: 1200px){
              #nav-right {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }


            #nav-right ul {
              margin:0 auto;
              width:100%;
              list-style: none;
              *zoom: 1;
            }

            @media screen and (max-width: 1200px){
              #nav-right ul {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }

            #nav-right ul:after {
                clear:both;
                display: table;
                content: "";
            }

            @media screen and (max-width: 1200px){
              #nav-right ul:after {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               }

            }

            #nav-right li {
              float: right;
              text-align: center;
              padding: 0 45px ;
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              border-radius: 4px; 
              list-style: none;
              border-right:1px solid #222;
            }


            @media screen and (max-width: 1200px){
              #nav-right li {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               border: none;
               }

            }

            #nav-right li:first-child {
              border-right: 0;
              padding-right: 0;

             }


            #nav-right a {
              position: relative;
              display:block;   
              color: #fff;
              padding: 40px 10px;
              line-height: 1px;
              text-decoration: none;
              -moz-border-radius: 4px;
              -webkit-border-radius: 4px;
              border-radius: 4px; 
            } 


            @media screen and (max-width: 1200px){
              #nav-right a {
               box-sizing: border-box;
               width:100%;
               text-align: center;
               border: none;
               }

            }   

              #nav-right a:hover {
              color: #A4C739;
            /*  -moz-box-shadow: 0 0 0 1px #fff;
              -webkit-box-shadow: 0 0 0 1px #fff;
              box-shadow: 0 0 1px 1px #fff; */
            }     


             .fixed {
                  position:fixed !important;
                } 



            .clear {
              clear: both;
            }

JS/JQUERY

    <!------------Begin JavaScript Functions for Fixed Header-------->

    <script type='text/javascript'> 
    jQuery(document).ready(function($){
    var aboveHeight = $('#slider').outerHeight();
    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('#nav-box').addClass('fixed').css('top','0').next().css('margin-top','55px');
        } else {
        $('#nav-box').removeClass('fixed').next().css('margin-top','0');
        }

    });
      $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('#second-nav').addClass('fixed').css('top','0').next().css('margin-top','40px');
        } else {
        $('#second-nav').removeClass('fixed').next().css('margin-top','0');
        }

    });  
    });


    </script>

    <!------------End JavaScript Functions for Fixed Header---------->

【问题讨论】：

  • 好吧，不要浪费你的编码技能，但该死的马虎。最终，我相信这就是为什么你没有得到想要的结果。媒体查询在您的 CSS 中工作，但我很确定它会在所有不同的调用中丢失。我修改了您提供的代码，如果缩小窗口，您可以在 CSS 中看到“leftnav”变为红色。我建议组织您的代码或从头开始并使用诸如引导程序之类的框架。 jsfiddle.net/kop5kaqz
  • 谢谢马特...正如我在帖子中提到的，代码很草率，但它只是 CSS。如您所见，这仍在进行中。不幸的是，重新开始不是一种选择，因为有最后期限。您还可以看到，这是每个客户端的非常自定义的请求，这有点令人不安。你能提供一种不同的方式来完成我需要做的事情吗？再次感谢！

标签： jquery css responsive-design fixed nav


【解决方案1】：

我建议从标准媒体查询开始。您也可以根据您的情况使用 max-width 或 max-device-width。您的所有查询似乎都只是超过 1200 像素（大格式）的最大宽度。您需要为每个布局弄清楚导航将如何适应。对于固定布局，您需要按比例减少每个元素。例如，如果您在 1200 像素宽的一行中有五个元素，对于 600 像素的移动屏幕，您可以将每个元素的宽度减半。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* iPads (portrait and landscape) Styles */
}

@media only screen 
(max-width : 600px) {
/* Mobile Only Styles */
}

更多信息： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果您查看 Twitter Bootstrap 移动优先方法，它们会针对不同宽度的设备设置以下主要断点，因为移动设备是默认 CSS（不在媒体查询中）：

/* Small devices (tablets, 768px and up) */
@media (min-width: @768px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

http://getbootstrap.com/css/

不过，对于您来说，您将希望使用 max-width 减法。如果您知道最大宽度，则可以按比例调整每个导航元素的大小。

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
      .butter.btn-1 {width:128px; font-size: 12px;}

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
      .butter.btn-1 {width:105px; font-size: 10px;}
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
      .butter.btn-1 {width:80px; font-size: 8px;}
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
      .butter.btn-1 {width:50px; font-size: 6px;}
    }

http://scotch.io/quick-tips/css3-quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Bootstrap 采用移动优先的方法，这与您的 HD 优先设计不同。所以，你可以反过来想，也就是说你的1200+分辨率是默认的，其他都需要修改。我知道这并不理想，也不是我推荐的，但你说过你不想改变这一切，所以这只是一种解决方法。

最终，我认为固定导航上的按钮会太小。您应该考虑的另一件事是使用相对 em 宽度而不是像素宽度。同样，Bootstrap 框架已经为您解决了很多这样的问题，因此大小已经是相对的。

【讨论】：

  • 感谢您的意见。我会看看这个，看看我想出了什么。我确实尝试添加您建议的第一个但无济于事。我将它复制并粘贴到我已经拥有的每个查询中。难道我做错了什么？我可以毫无问题地让其他一切都响应。
  • 所以，我认为缺少的是你需要拥有三样东西。 1) 桌面设计——这应该是没有媒体查询的普通基础 css。 2) 如果您想以不同的方式对待平板电脑，请使用上述平板电脑媒体查询。通常这不是必需的，因为大多数网站看起来都不错。 3) 移动媒体查询——专为小于 800 像素或 600 像素宽的分辨率设计。
  • 谢谢。媒体查询应该放在哪些元素上？此外，什么是缩小移动设备固定导航的好解决方案？
  • 好的，我已经编辑了答案以包含 Twitter Bootstrap 媒体查询。我建议在纸上画出每个宽度的样子。写出每个元素的 ID 和类，然后在媒体查询中调整它们。
  • 感谢您全面而深入的回答。我要试试这个，看看我想出了什么结果。我非常感谢您的所有帮助。我会让你知道结果是什么。
猜你喜欢
  • 2021-05-12
  • 1970-01-01
  • 2011-04-24
  • 2014-10-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-06
  • 2015-12-10
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode