Question

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

<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吗？我很累要解决这个菜单。请任何人帮助我尝试并指导我

Answer 1

我不知道您是否接受不同的建议，我的菜单始终像这样，如果媒体屏幕宽度大于1024，而没有显示，则桌面宽菜单类desktopmenu仅显示块。然后有一个用于移动设备的第二菜单mobilemenu类，其中包含下拉菜单和burger图标切换，可触发1024以下的显示块并隐藏1024以上的媒体屏幕宽度。希望能帮助到你。我会去研究您的代码，但是我正在使用移动设备。不能输入代码atm。如果您仍然希望保留该格式，请明天查看。希望我的建议能对您有所帮助，以防万一您想改变您的做法。如果您不想菜单，则可以始终使用网格CSS或Flex。我认为只是网格，我需要一些-ms-前缀的双码敌人，即ie9和safari。从图像看来，您似乎缺少仅@media移动@屏幕最大宽度768px css格式。乌尔喜欢中途艰难。

如何修复导航菜单

1 个答案: