增加 页内导航
This commit is contained in:
LyLme
parent
b4a78d9909
commit
8fa48ae8fb
|
|
@ -1,8 +1,8 @@
|
|||
a:hover{text-decoration:none !important;font-weight:bold !important}
|
||||
a:hover{text-decoration:none;font-weight:bold}
|
||||
a.icp{font-size:12px;color:#bbb;text-align:center}
|
||||
.navbar .navbar-expand-lg .navbar-light .fixed-top{position:absolute;z-index:10000}
|
||||
.bottom-cover{background-image:linear-gradient(rgba(255,255,255,0) 0%,rgb(244 248 251 / 0.6) 50%,rgb(244 248 251) 100%)}
|
||||
.navbar-light .navbar-toggler{color:#fff !important}
|
||||
.navbar-light .navbar-toggler{color:#fff}
|
||||
p.content{text-align:center;padding:5px 30px;border-radius:10px;font-size:12px;color:#fff;font-weight:500}
|
||||
::-webkit-scrollbar{display:none}
|
||||
.back-to{bottom:55px;overflow:hidden;position:fixed;right:10px;width:110px;z-index:999}
|
||||
|
|
@ -14,7 +14,7 @@ body{font-size:14px;background:#f4f8fb;overflow-x:hidden}
|
|||
a{text-decoration:none}
|
||||
a:hover{text-decoration:none}
|
||||
svg.icon{width:14px;height:14px;margin:0 5px 0 8px;vertical-align:-0.15em;fill:currentColor;overflow:hidden}
|
||||
.navbar-light .navbar-nav .nav-link{color:#fff !important;font-size:16px;font-weight:bold;text-shadow:0px 1px 0px #000}
|
||||
.navbar-light .navbar-nav .nav-link{color:#fff;font-size:16px;font-weight:bold;text-shadow:0px 1px 0px #000}
|
||||
#search{width:100%;margin:0;padding:0 0 10px;position:relative;z-index:2000;border-radius:5px}
|
||||
#search form{position:relative;margin-top:15px}
|
||||
#search-text{width:100%;height:50px;line-height:50px;text-indent:10px;font-size:16px;border-radius:10px;background-color:#fff;border:1px solid #c4c7ce;box-shadow:0 0.5rem 0.625rem #d4d4d44d;transition:0.3s all linear;padding-left:20px}
|
||||
|
|
@ -41,7 +41,7 @@ svg.icon{width:14px;height:14px;margin:0 5px 0 8px;vertical-align:-0.15em;fill:c
|
|||
.search-type{white-space:nowrap;margin:0}
|
||||
.search-type label{margin:0}
|
||||
.search-type img {width: 14px;height: 14px;margin: 0 5px 0 8px;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
|
||||
.search-type li{margin-bottom:10px;display:inline-block;background:#ffffffAD !important;background:rgba(255,255,255,70%);border-radius:10px}
|
||||
.search-type li{margin-bottom:10px;display:inline-block;background:#ffffffAD;background:rgba(255,255,255,70%);border-radius:10px}
|
||||
.search-type li label{display:inline-block;padding:0 11px;font-size:14px;border-radius:3px 3px 0 0;cursor:pointer}
|
||||
.search-type input:checked+label,.search-type input:hover+label{background-color:#fff;height:50px;border-radius:10px}
|
||||
#search-text::-webkit-input-placeholder{color:#bbb}
|
||||
|
|
@ -65,7 +65,7 @@ svg.icon{width:14px;height:14px;margin:0 5px 0 8px;vertical-align:-0.15em;fill:c
|
|||
.bottom-cover{width:100%;height:50%;position:absolute;bottom:-1px;z-index:10}
|
||||
@media screen and (min-width:1200px){.mylist li.col-3{min-width:132px}
|
||||
}@media screen and (min-width:992px) and (max-width:1200px){.mylist li.col-3{min-width:110px}
|
||||
}@media screen and (max-width:992px){#he-plugin-simple{display:none !important}
|
||||
}@media screen and (max-width:992px){#he-plugin-simple{display:none}
|
||||
.banner-video video{width:1200px}
|
||||
.banner-video img{object-fit:cover;width:100%;height:100vh}
|
||||
.search-group{padding-left:0px}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
.box{margin:40px 0;position:fixed;z-index:1000}
|
||||
.change-type{min-width:40px;min-height:160px;position:absolute;z-index:99;left:0;top:0;display:flex}
|
||||
.change-type .type-left{width:0;background:#fff;height:100%;box-shadow:0 2px 12px 0 rgb(0 0 0 / 50%);border-bottom-right-radius:5px;border-top-right-radius:5px;margin-left:-40px;overflow:hidden;transition:width 0.4s;-moz-transition:width 0.4s;-webkit-transition:width 0.4s;-o-transition:width 0.4s}
|
||||
.change-type .showListType{width:130px;transition:width 0.4s;-moz-transition:width 0.4s;-webkit-transition:width 0.4s;-o-transition:width 0.4s}
|
||||
.change-type .type-left ul{margin-bottom:0px}
|
||||
.change-type .type-left ul li{line-height:40px;height:40px;text-align:left;width:100%;position:relative;cursor:pointer;list-style:none}
|
||||
.change-type .type-left ul li a{display:block;height:100%;position:absolute;left:0;top:0;z-index:9;padding-left:15px;overflow:hidden;width:calc(100% - 17px);color:#333;font-size:14px;border-left:2px solid #26778d}
|
||||
.change-type .type-left ul li span{display:block;position:absolute;width:0;height:100%;left:0;top:0;z-index:8;overflow:hidden;transition:width 0.5s;-moz-transition:width 0.5s;-webkit-transition:width 0.5s;-o-transition:width 0.5s}
|
||||
.change-type .type-left ul li:hover span{transition:width 0.5s;-moz-transition:width 0.5s;-webkit-transition:width 0.5s;-o-transition:width 0.5s}
|
||||
.type-left ul li:nth-child(1):hover span,.type-left ul li:nth-child(1).active span,.type-left ul li:nth-child(8):hover span,.type-left ul li:nth-child(8).active span{background:#2C73D2;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
|
||||
.type-left ul li:nth-child(1):hover a,.type-left ul li:nth-child(1).active a,.type-left ul li:nth-child(8):hover a,.type-left ul li:nth-child(8).active a{border-left:2px solid #2C73D2;color:#fff}
|
||||
.type-left ul li:nth-child(2):hover span,.type-left ul li:nth-child(2).active span,.type-left ul li:nth-child(9):hover span,.type-left ul li:nth-child(9).active span{background:#D65DB1;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
|
||||
.type-left ul li:nth-child(2):hover a,.type-left ul li:nth-child(2).active a,.type-left ul li:nth-child(9):hover a,.type-left ul li:nth-child(9).active a{border-left:2px solid #D65DB1;color:#fff}
|
||||
.type-left ul li:nth-child(3):hover span,.type-left ul li:nth-child(3).active span,.type-left ul li:nth-child(10):hover span,.type-left ul li:nth-child(10).active span{background:#00C9A7;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
|
||||
.type-left ul li:nth-child(3):hover a,.type-left ul li:nth-child(3).active a,.type-left ul li:nth-child(10):hover a,.type-left ul li:nth-child(10).active a{border-left:2px solid #00C9A7;color:#fff}
|
||||
.type-left ul li:nth-child(4):hover span,.type-left ul li:nth-child(4).active span,.type-left ul li:nth-child(11):hover span,.type-left ul li:nth-child(11).active span{background:#009EFA;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
|
||||
.type-left ul li:nth-child(4):hover a,.type-left ul li:nth-child(4).active a,.type-left ul li:nth-child(11):hover a,.type-left ul li:nth-child(11).active a{border-left:2px solid #009EFA;color:#fff}
|
||||
.type-left ul li:nth-child(5):hover span,.type-left ul li:nth-child(5).active span,.type-left ul li:nth-child(12):hover span,.type-left ul li:nth-child(12).active span{background:#FF8066;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
|
||||
.type-left ul li:nth-child(5):hover a,.type-left ul li:nth-child(5).active a,.type-left ul li:nth-child(12):hover a,.type-left ul li:nth-child(12).active a{border-left:2px solid #FF8066;color:#fff}
|
||||
.type-left ul li:nth-child(6):hover span,.type-left ul li:nth-child(6).active span,.type-left ul li:nth-child(13):hover span,.type-left ul li:nth-child(13).active span{background:#64b5f6;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
|
||||
.type-left ul li:nth-child(6):hover a,.type-left ul li:nth-child(6).active a,.type-left ul li:nth-child(13):hover a,.type-left ul li:nth-child(13).active a{border-left:2px solid #64b5f6;color:#fff}
|
||||
.type-left ul li:nth-child(7):hover span,.type-left ul li:nth-child(7).active span,.type-left ul li:nth-child(14):hover span,.type-left ul li:nth-child(14).active span{background:#388e3c;width:100%;box-shadow:0px 2px 5px 0 rgba(0,0,0,0.5)}
|
||||
.type-left ul li:nth-child(7):hover a,.type-left ul li:nth-child(7).active a,.type-left ul li:nth-child(14):hover a,.type-left ul li:nth-child(14).active a{border-left:2px solid #388e3c;color:#fff}
|
||||
ul.navbar-nav.mr-auto{margin-left:60px}
|
||||
.type-right{position:fixed;top:38px}
|
||||
.type-right svg{width:28px;height:28px}
|
||||
@media screen and (max-width:992px){.type-right{position:fixed;top:10px;right:10px}}
|
||||
|
|
@ -21,7 +21,8 @@
|
|||
<link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/4.5.3/css/bootstrap.min.css" type="text/css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="<?php echo $cdnpublic ?>/assets/css/fontawesome-free5.13.0.css" type="text/css">
|
||||
<link rel="stylesheet" href="<?php echo $templatepath;?>/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="<?php echo $templatepath;?>css/font.css" type="text/css">
|
||||
<link rel="stylesheet" href="<?php echo $templatepath;?>/css/font.css" type="text/css">
|
||||
<link rel="stylesheet" href="<?php echo $templatepath;?>/css/tag.css" type="text/css">
|
||||
</head>
|
||||
<body onload="FocusOnInput()"><div class="banner-video">
|
||||
<?php if(!empty(background())){ echo '<img src="'.background().'">';}?>
|
||||
|
|
@ -29,6 +30,40 @@
|
|||
<div class="bottom-cover" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(244 248 251 / 0.6) 50%, rgb(244 248 251) 100%);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="change-type">
|
||||
<div class="type-left" :class="showType == true ? 'showListType':''">
|
||||
<ul>
|
||||
<li data-lylme="search"><a>搜索</a><span></span></li>
|
||||
<?php
|
||||
$groups = $DB->query("SELECT * FROM `lylme_groups` ORDER BY `group_order` ASC"); // 获取分类
|
||||
while ($group = $DB->fetch($groups)) { //循环所有分组
|
||||
|
||||
echo '<li data-lylme="group_'. $group["group_id"] . '"><a>'. $group["group_name"] . '</a><span></span></li>'."\n";
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('.type-right').click(function(){
|
||||
$('.type-left').toggleClass('showListType')
|
||||
});
|
||||
$('.type-left ul li').click(function(){
|
||||
$(this).addClass('active').siblings('li').removeClass('active');
|
||||
$('.type-left').toggleClass('showListType');
|
||||
var lylme_tag = '#'+$(this).attr("data-lylme");
|
||||
$('html,body').animate({scrollTop:$(lylme_tag).offset().top},500);
|
||||
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--topbar开始-->
|
||||
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="position: absolute; z-index: 10000;">
|
||||
<!--<a class="navbar-brand" href="/"><img src="./assets/img/logo.png" height="25" title="六零起始页"></a>-->
|
||||
|
|
@ -37,8 +72,13 @@
|
|||
<svg class="icon" width="200" height="200"><use xlink:href="#icon-menus"></use></svg>
|
||||
<span><svg class="bi bi-x" fill="currentColor" id="x"><use xlink:href="#icon-closes"></use></svg><span>
|
||||
</button>
|
||||
|
||||
<div class="type-right" >
|
||||
<svg t="1651476001599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6329" width="200" height="200"><path d="M512 491.52l286.72-286.72-522.24 174.08L512 491.52zM137.216 337.92L866.304 96.256c16.384-6.144 34.816 4.096 40.96 20.48 2.048 6.144 2.048 14.336 0 20.48L665.6 866.304c-6.144 16.384-24.576 26.624-40.96 20.48-8.192-2.048-14.336-8.192-18.432-16.384L450.56 552.96 133.12 399.36c-16.384-8.192-22.528-26.624-14.336-43.008 2.048-8.192 10.24-14.336 18.432-18.432z" fill="#304ECE" p-id="6330"></path></svg>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
|
||||
<?php
|
||||
$tagslists = $DB->query("SELECT * FROM `lylme_tags`");
|
||||
while ($taglists = $DB->fetch($tagslists)) {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ while ($group = $DB->fetch($groups)) { //循环所有分组
|
|||
$sql = "SELECT * FROM `lylme_links` WHERE `group_id` = " . $group['group_id'];
|
||||
$group_links = $DB->query($sql);
|
||||
$link_num = $DB->num_rows($group_links); // 获取返回字段条目数量
|
||||
echo '<ul class="mylist row"><li class="title">' . $group["group_icon"] . '<sapn>' . $group["group_name"] . '</sapn></li>'; //输出分组图标和标题
|
||||
echo '<ul class="mylist row"><li id="group_' . $group["group_id"] . '" class="title">' . $group["group_icon"] . '<sapn>' . $group["group_name"] . '</sapn></li>'; //输出分组图标和标题
|
||||
if ($link_num == 0) {
|
||||
echo '</ul>' . "\n";
|
||||
$i = 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue