时间戳

首页 > 解决方案 > 如何修复导航菜单

javascript - 如何修复导航菜单

问题描述

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

在此处输入图像描述

<div class="container">
            <a class="logo" href="<?php echo site_url();?>"><img src="<?php echo base_url().'theme/images/'.$data['site_logo_header'];?>" alt="<?php echo $data['site_name'];?>"></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？我很累解决这个菜单。请任何人帮助我尝试并指导我

标签： javascriptjquerycssdrop-down-menumenu

解决方案

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

推荐阅读