xiuno移动端显示侧边栏代码 xiuno

明天星期八 (UID:2) 2025-4-21 22

header_nav.inc.htm文件,标签</header>之前添加如下代码:
左侧:点击菜单按钮

    <!-- 左侧:菜单按钮  -->
    <span class="fa fa-bars MobilemenuBtn js-sidebar--open MobilemenuBtn-text" aria-label="展开菜单"></span>​

侧边栏弹出菜单

        <!--侧边栏菜单-->
        <aside class="js-sidebar">
            <div class="js-sidebar--container" style="transition: all 0.3s ease 0s; transform: translate(-100%, 0px);">
                <?php if(empty($uid)) { ?>
                <div class="sidebar--title p-4">
                    <div class="media">
                        <a class="mr-3" href="user-login.htm"><img class="avatar-3"
                                src="<?php echo $conf['logo_mobile_url'];?>" style="width: 3.5rem;height: 3.5rem;">
                        </a>
                        <div class="media-body">
                            <a href="user-login.htm" class="text-white">
                                <span class="h5">登录/注册</span>
                                <div class="mt-2">
                                    <span>登录/注册,发现更多精彩!</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    </div>
                    <?php } else { ?>
                    <div class="sidebar--title p-4">
                    <div class="media">
                    <a class="mr-3" href="my.htm"><img class="avatar-3" src="<?php echo $conf['logo_mobile_url'];?>" style="width: 3.5rem;height: 3.5rem;"> </a>
    				<div class="media-body">
    				    <span class="h5"><?php echo $user['username'];?></span>
    				    <div class="mt-2">
    						<a href="my.htm">
    							<span class="badge badge-pill badge-primary"><?php echo lang('user_uid');?>:<?php echo $user['uid'];?></span>
    							<span class="badge badge-pill badge-info ml-1"><?php echo $user['groupname'];?></span>
    						</a>
    					</div>  
    				</div>
    				<div style="position: absolute;top: 10px;right: 10px;"><a class="badge badge-danger badge-pill p-2" href="user-logout.htm"><i class="fa fa-sign-out-alt"></i></a>
    				</div>
    				</div>
                </div>
                    <?php } ?>

                <div class="sidebar_menu p-4">
                    <div class="form-group nav-item hidden-lg ">
                        <form action="search.htm" id="search_form">
                            <div class="input-group">
                                <input type="text" class="form-control"
                                    style="border-radius: 100px;background-color: var(--light);border: 0;" placeholder="关键词"
                                    name="keyword">
                                <div class="input-group-append">
                                    <button class="btn btn-light"
                                        style="border-radius: 100px; margin-left: -38px;z-index: 999;" type="submit"><span
                                            class="icon-search"></span></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

                        <li class="nav-item home active" data-active="index">
                            <a class="nav-link active" href="./" data-active="index"><i class="iconfont icon-shouye"></i>
                                首页</a>
                        </li>
                        <li class="nav-item collapsed" data-toggle="collapse" data-target="#pages" aria-expanded="false"
                            aria-controls="pages">
                            <a class="nav-link dropdown-toggle"><i class="iconfont icon-dingdan"></i>
                                页面</a>
                        </li>
                        <div class="multi-collapse pl-3 collapse" id="pages" style="">
                            <li class="nav-item links" data-active="links"><a class="nav-link" href="links.htm"><span
                                        class="iconfont icon-lianjie"></span> 邻居</a></li>
                            <li class="nav-item ranklist" data-active="ranklist"><a class="nav-link" href="ranklist.htm"><i
                                        class="iconfont icon-huiyuan1"></i> 排行榜</a></li>
                            <div class="form-group nav-item mb-0 hidden-sm hidden-md ml-4" style="margin-top: 10px;">
                                <form action="search.htm" id="search_form">
                                    <div class="input-group ">
                                        <input type="text" class="form-control"
                                            style="border-radius: 100px;width: 200px;background-color: var(--light);border: 0;"
                                            placeholder="关键词" name="keyword">
                                        <div class="input-group-append">
                                            <button class="btn btn-light"
                                                style="border-radius: 100px; margin-left: -38px;z-index: 999;"
                                                type="submit"><span class="iconfont icon-sousuo1"></span></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <li class="nav-item collapsed" data-toggle="collapse" data-target="#multiCollapseExample2"
                            aria-expanded="false" aria-controls="multiCollapseExample2">
                            <a class="nav-link dropdown-toggle"><i class="iconfont icon-shezhi1"></i>
                                我的</a>
                        </li>
                        <div class="multi-collapse pl-3 collapse" id="multiCollapseExample2" style="">

                            <div class="my_option ">
                                <!-- 管理员 -->
                                <li class="nav-item">
    								<a class="nav-link" href="<?php echo url('my');?>"><span class="fa fa-user"
    										data-toggle="tooltip" data-placement="top" title="个人中心"></span> <span
    										class="hidden-lg"> <?php echo lang('my_profile');?></span></a>
    							</li>
    							<li class="nav-item usernotice " id="nav-usernotice" data-active="nav-usernotice">
    								<a class="nav-link" href="my-notice.htm"><span class="icon-bell"
    										data-toggle="tooltip" data-placement="top" title="消息"></span> <span
    										class="hidden-lg"> 消息</span>
    								</a>
    							</li>
    								<?php if($gid == 1) { ?>
    							<li class="nav-item">
    								<a class="nav-link" href="admin/"><span class="fa fa-cog"
    										data-toggle="tooltip" data-placement="top"
    										title="<?php echo lang('admin_page');?>"></span> <span
    										class="hidden-lg"> <?php echo lang('admin_page');?></span></a>
    								<?php } ?>
    							</li>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dropdown-divider"></div>
                <div class="sidebar_forumList p-4">

                    <div class="nav navbar-nav forumlist px-4">
                        <div class="row">
                        <?php foreach($forumlist_show as $_forum) { ?>
                            <li class="nav-item col-6 p-1" fid="<?php echo $_forum['fid'];?>" data-active="fid-<?php echo $_forum['fid'];?>">
                                <a class="nav-link py-2 rounded small forumlist-bg mr-0" href="<?php echo url("forum-$_forum[fid]");?>">
                                    <div class="text-center">
                                        <img class="avatar-1 mr-1 rounded" src="<?php echo $_forum['icon_url'];?>">

                                        <span><?php echo $_forum['name'];?></span>
                                    </div>
                                </a>
                            </li>
                        <?php } ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="js-sidebar--background"></div>
        </aside>​

 

css样式

 

sidebar.js文件代码

 

文件加入调用

最新回复 (1)
  • 哆哆 2025-4-21
    2

    看看

你可以在 登录 or 注册 后,对此帖发表评论!

返回
发新帖
赞助商家我要入驻