如何修复导航菜单

Posted

技术标签:

【中文标题】如何修复导航菜单【英文标题】:How to fix nav menu 【发布时间】:2020-09-25 03:42:19 【问题描述】:

如何修复我的菜单,当网络稳定菜单仅在移动设备上,但菜单不显示或隐藏时

<div class="container">
            <a class="logo" href="<?php echo site_url();?>"><img src="<?php echo base_url().'theme/images/'.$data['site_logo_header'];?>" ></a>

            <a class="right-area src-btn" href="#" >
                <i class="active src-icn ion-search"></i>
                <i class="close-icn ion-close"></i>
            </a>
            <div class="src-form">
                <form method="get" action="<?php echo site_url('search');?>">
                    <input type="text" name="search_query" placeholder="Search here" required>
                    <button type="submit"><i class="ion-search"></i></a></button>
                </form>
            </div><!-- src-form -->

            <a class="menu-nav-icon" data-menu="#main-menu" href="#"><i class="ion-navicon"></i></a>

            <div class="nav-wrapper large-nav">
            <ul class="main-menu" id="main-menu">
                <li><a href="<?php echo site_url();?>">HOME</a></li>
                <li>
                <a href="<?php echo base_url();?>profile" class="menu-down">
                  PROFILE
                </a>

                    <div class="menu-down">
                      <a class="dropdown-item" href="#">SEJARAH</a>
                      <a class="dropdown-item" href="#">LAMBANG</a>
                      <a class="dropdown-item" href="#">DANSAT</a>
                      <a class="dropdown-item" href="#">PEJABAT TERAS</a>
                      <a class="dropdown-item" href="#">RIWAYAT PENUGASAN</a>
                      <a class="dropdown-item" href="#">TUGAS POKOK</a>
                    </div>
                </li>
                <!--<?php 
                    $query=$this->db->get('tbl_category', 3);
                    foreach ($query->result() as $row):
                ?>
                <li><a href="<?php echo site_url('category/'.$row->category_slug);?>"><?php echo strtoupper($row->category_name);?></a></li>
                <?php endforeach;?>-->
                <li><a href="<?php echo site_url('blog');?>">BLOG</a></li>
                <li><a href="<?php echo site_url('contact');?>">CONTACT</a></li>
            </ul>
            </div>
            <div class="clearfix"></div>
        </div><!-- container -->

帮我解决这个CSS?我很累解决这个菜单。请任何人帮助我尝试并指导我

【问题讨论】:

【参考方案1】:

我不知道你是否愿意接受不同的建议,我的菜单总是这样,桌面宽菜单类 desktopmenu 仅在媒体屏幕宽度大于 1024 时才显示块,如果更少则不显示。然后有一个用于移动设备的第二个菜单 mobilemenu 类,带有下拉菜单和汉堡图标切换,触发 1024 下的显示块并隐藏 1024 媒体屏幕宽度以上。希望能帮助到你。我会进入你的代码,但我在移动设备上工作。不能给atm打码。如果你还想保持这种格式,明天我会看看它。希望我的建议对您有所帮助,以防您想改变您的方法。如果您不想使用菜单,您可以随时使用网格 css 或 flex。我认为只是网格需要一些-ms-前缀双码敌人ie9和safari。从图像看来,您似乎缺少移动 @media 仅屏幕,最大宽度为 768px css 格式。乌尔就像艰难的一半。

【讨论】:

以上是关于如何修复导航菜单的主要内容,如果未能解决你的问题,请参考以下文章

css Divi导航菜单下拉修复

未使用 Twitter Bootstrap 修复导航栏内容时居中?

如何使用引导程序修复菜单

使用 jquery 修复顶部的菜单。向下滚动时以后不会出现菜单?

JQuery - 导航菜单上滑/下滑过渡

如何冻结窗格/修复网站标题和水平导航栏?