设为首页收藏本站
切换到宽版

 找回密码
 注册
搜索
免费吧论坛»论坛 › 主版块 › 资源交流 › 有没有好看的PHP版个人网站导航，带后台管理的 ...
免费空间 免费域名 免费AI 老牌主机商首月仅1美分！27美元/年！Namecheap优惠码Spaceship优惠码
123
返回列表 发新帖
楼主: inoking

[问题求助] 有没有好看的PHP版个人网站导航，带后台管理的

[复制链接]
inoking
 楼主| 发表于 7 天前 | 显示全部楼层
yaner 发表于 2025-3-22 11:26
好吧，来个极简的，没有后台。
https://hu.xd94.com/link/scyx_g.php

代码分享下
回复

举报

yaner
发表于 7 天前 | 显示全部楼层
本帖最后由 yaner 于 2025-3-23 00:04 编辑
inoking 发表于 2025-3-22 13:01
代码分享下

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>悬停切换导航</title>
  8. <base target="_blank">
  9. <style>
  10. :root {
  11. --primary-color: #004a9b;
  12. --active-color: #e60012;
  13. --button-bg: #1e90ff;
  14. --button-hover: #1c75d8;
  15. --sidebar-width: 250px;
  16. }
  17. * { margin: 0; padding: 0; box-sizing: border-box; }
  18. .tab-container {
  19. max-width: 800px;
  20. margin: 20px auto;
  21. background: #fff;
  22. box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  23. border-radius: 8px;
  24. display: flex;
  25. height: 600px;
  26. }
  27. .tab-nav {
  28. width: var(--sidebar-width);
  29. background: #f8f8f8;
  30. border-right: 2px solid #eee;
  31. border-radius: 8px 0 0 8px;
  32. padding: 20px 0;
  33. }
  34. .tab-trigger {
  35. padding: 15px 20px;
  36. font-size: 17px;
  37. color: #666;
  38. cursor: pointer;
  39. transition: all 0.3s;
  40. }
  41. .tab-trigger:hover,
  42. .tab-trigger.active {
  43. color: var(--active-color);
  44. background: #e0e0e0;
  45. }
  46. .tab-content {
  47. flex: 1;
  48. padding: 30px;
  49. overflow-y: auto;
  50. }
  51. .content-pane {
  52. display: none;
  53. animation: fadeIn 0.4s ease-out;
  54. }
  55. .content-pane.active {
  56. display: block;
  57. }
  58. ul { list-style: none; }
  59. .nav-button {
  60. display: block;
  61. width: 100%;
  62. max-width: 400px;
  63. height: 50px;
  64. margin: 10px 0;
  65. background: var(--button-bg);
  66. color: white;
  67. font-size: 16px;
  68. text-align: center;
  69. line-height: 50px;
  70. border-radius: 8px;
  71. text-decoration: none;
  72. transition: background 0.3s ease;
  73. box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  74. }
  75. .nav-button:hover {
  76. background: var(--button-hover);
  77. }
  78. @keyframes fadeIn {
  79. from { opacity: 0; transform: translateY(10px); }
  80. to { opacity: 1; transform: translateY(0); }
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <?php
  86. // 读取菜单数据文件
  87. $menu_data = [];
  88. $current_category = '';
  89. $file_path = 'website.txt';
  90. if (file_exists($file_path)) {
  91. $lines = file($file_path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
  92. foreach ($lines as $line) {
  93. $line = trim($line);
  94. if (strpos($line, ',') === false) {
  95. $current_category = $line;
  96. $menu_data[$current_category] = [];
  97. } else {
  98. [$title, $link, $desc] = array_pad(explode(',', $line, 3), 3, '');
  99. $menu_data[$current_category][] = [
  100. 'title' => trim($title),
  101. 'link' => trim($link),
  102. 'desc' => trim($desc)
  103. ];
  104. }
  105. }
  106. }
  107. $categories = array_keys($menu_data);
  108. ?>
  109. <div class="tab-container">
  110. <nav class="tab-nav">
  111. <?php foreach ($categories as $i => $category): ?>
  112. <div class="tab-trigger <?= $i === 0 ? 'active' : '' ?>" onmouseover="switchTab('cat<?= $i ?>')"><?= htmlspecialchars($category) ?></div>
  113. <?php endforeach; ?>
  114. </nav>
  115. <div class="tab-content">
  116. <?php foreach ($categories as $i => $category): ?>
  117. <div id="cat<?= $i ?>" class="content-pane <?= $i === 0 ? 'active' : '' ?>">
  118. <ul>
  119. <?php foreach ($menu_data[$category] as $item): ?>
  120. <li><a href="<?= htmlspecialchars($item['link']) ?>" class="nav-button" title="<?= htmlspecialchars($item['desc']) ?>"><?= htmlspecialchars($item['title']) ?></a></li>
  121. <?php endforeach; ?>
  122. </ul>
  123. </div>
  124. <?php endforeach; ?>
  125. </div>
  126. </div>
  127. <script>
  128. function switchTab(tabId) {
  129. document.querySelectorAll('.tab-trigger').forEach(t => t.classList.remove('active'));
  130. document.querySelectorAll('.content-pane').forEach(p => p.classList.remove('active'));
  131. event.target.classList.add('active');
  132. document.getElementById(tabId).classList.add('active');
  133. }
  134. </script>
  135. </body>
  136. </html>
复制代码

web.php

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>悬停切换导航</title>
  7. <base target="_blank">
  8. <style>
  9. :root {
  10. --primary-color: #004a9b;
  11. --active-color: #e60012;
  12. --button-bg: #1e90ff;
  13. --button-hover: #1c75d8;
  14. --sidebar-width: 250px;
  15. }
  16. * { margin: 0; padding: 0; box-sizing: border-box; }
  17. .tab-container {
  18. max-width: 800px;
  19. margin: 20px auto;
  20. background: #fff;
  21. box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  22. border-radius: 8px;
  23. display: flex;
  24. height: 600px;
  25. }
  26. .tab-nav {
  27. width: var(--sidebar-width);
  28. background: #f8f8f8;
  29. border-right: 2px solid #eee;
  30. border-radius: 8px 0 0 8px;
  31. padding: 20px 0;
  32. }
  33. .tab-trigger {
  34. padding: 15px 20px;
  35. font-size: 17px;
  36. color: #666;
  37. cursor: pointer;
  38. transition: all 0.3s;
  39. }
  40. .tab-trigger:hover,
  41. .tab-trigger.active {
  42. color: var(--active-color);
  43. background: #e0e0e0;
  44. }
  45. .tab-content {
  46. flex: 1;
  47. padding: 30px;
  48. overflow-y: auto;
  49. }
  50. .content-pane {
  51. display: none;
  52. animation: fadeIn 0.4s ease-out;
  53. }
  54. .content-pane.active {
  55. display: block;
  56. }
  57. ul { list-style: none; }
  58. .nav-button {
  59. display: block;
  60. width: 100%;
  61. max-width: 400px;
  62. height: 50px;
  63. margin: 10px 0;
  64. background: var(--button-bg);
  65. color: white;
  66. font-size: 16px;
  67. text-align: center;
  68. line-height: 50px;
  69. border-radius: 8px;
  70. text-decoration: none;
  71. transition: background 0.3s ease;
  72. box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  73. }
  74. .nav-button:hover {
  75. background: var(--button-hover);
  76. }
  77. @keyframes fadeIn {
  78. from { opacity: 0; transform: translateY(10px); }
  79. to { opacity: 1; transform: translateY(0); }
  80. }
  81. /* 分类标题样式 */
  82. .category-title {
  83. font-size: 20px;
  84. color: var(--primary-color);
  85. margin-bottom: 15px;
  86. padding-bottom: 5px;
  87. border-bottom: 2px solid #eee;
  88. display: none; /* 默认隐藏 */
  89. }
  90. /* 移动端样式 */
  91. @media screen and (max-width: 768px) {
  92. .tab-container {
  93. display: block;
  94. height: auto;
  95. padding: 20px;
  96. }

  98. .tab-nav {
  99. display: none; /* 隐藏侧边栏 */
  100. }

  102. .tab-content {
  103. padding: 0;
  104. }

  106. .content-pane {
  107. display: block; /* 全部显示 */
  108. margin-bottom: 30px;
  109. }

  111. .content-pane.active {
  112. display: block;
  113. }

  115. .category-title {
  116. text-align: center;
  117. display: block; /* 移动端显示标题 */
  118. }

  120. .nav-button {
  121. max-width: 100%;
  122. }
  123. }
  124. /* 桌面端确保标题隐藏 */
  125. @media screen and (min-width: 769px) {
  126. .category-title {
  127. display: none !important; /* 强制隐藏标题 */
  128. }
  129. }
  130. </style>
  131. </head>
  132. <body>
  133. <?php
  134. // 读取菜单数据文件
  135. $menu_data = [];
  136. $current_category = '';
  137. $file_path = 'website.txt';
  138. if (file_exists($file_path)) {
  139. $lines = file($file_path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
  140. foreach ($lines as $line) {
  141. $line = trim($line);
  142. if (strpos($line, ',') === false) {
  143. $current_category = $line;
  144. $menu_data[$current_category] = [];
  145. } else {
  146. [$title, $link, $desc] = array_pad(explode(',', $line, 3), 3, '');
  147. $menu_data[$current_category][] = [
  148. 'title' => trim($title),
  149. 'link' => trim($link),
  150. 'desc' => trim($desc)
  151. ];
  152. }
  153. }
  154. }
  155. $categories = array_keys($menu_data);
  156. ?>
  157. <div class="tab-container">
  158. <nav class="tab-nav">
  159. <?php foreach ($categories as $i => $category): ?>
  160. <div class="tab-trigger <?= $i === 0 ? 'active' : '' ?>" onmouseover="switchTab('cat<?= $i ?>')"><?= htmlspecialchars($category) ?></div>
  161. <?php endforeach; ?>
  162. </nav>
  163. <div class="tab-content">
  164. <?php foreach ($categories as $i => $category): ?>
  165. <div id="cat<?= $i ?>" class="content-pane <?= $i === 0 ? 'active' : '' ?>">
  166. <h2 class="category-title"><?= htmlspecialchars($category) ?></h2>
  167. <ul>
  168. <?php foreach ($menu_data[$category] as $item): ?>
  169. <li><a href="<?= htmlspecialchars($item['link']) ?>" class="nav-button" title="<?= htmlspecialchars($item['desc']) ?>"><?= htmlspecialchars($item['title']) ?></a></li>
  170. <?php endforeach; ?>
  171. </ul>
  172. </div>
  173. <?php endforeach; ?>
  174. </div>
  175. </div>
  176. <script>
  177. function switchTab(tabId) {
  178. document.querySelectorAll('.tab-trigger').forEach(t => t.classList.remove('active'));
  179. document.querySelectorAll('.content-pane').forEach(p => p.classList.remove('active'));
  180. event.target.classList.add('active');
  181. document.getElementById(tabId).classList.add('active');
  182. }
  183. // 在移动端不需要切换功能，所以只在桌面端启用
  184. if (window.innerWidth > 768) {
  185. document.querySelectorAll('.tab-trigger').forEach(trigger => {
  186. trigger.addEventListener('mouseover', function(e) {
  187. switchTab(e.target.getAttribute('onmouseover').match(/'([^']+)'/)[1]);
  188. });
  189. });
  190. }
  191. </script>
  192. </body>
  193. </html>
复制代码
web.php 兼顾移动端显示

  1. 省教育厅
  2. 职业教育高质量发展新举措,/edu/policy.html,2025年全省教育工作部署
  3. 教师帮培计划进展,/edu/training.html,首批300名教师培训完成
  4. 校园食品安全专项,/edu/food-safety.html,抽检合格率98.7%
  5. 省经信厅
  6. 工业增加值数据,/economy/growth.html,同比增长6.8%
  7. 轻工认证中心,/economy/certification.html,新增国家级认证中心2个
  8. 盐化工升级规划,/economy/upgrade.html,2025年智能化生产线规划
  9. 今日盐校
  10. 新校区建设进度,/school/campus.html,2025年9月投入使用计划
  11. 毕业生就业数据,/school/employment.html,盐业相关专业就业率100%
  12. 跨省教学合作,/school/cooperation.html,与江西陶瓷工艺美院共建基地
  13. 留言
  14. 留言本,https://gb.gwxy.net,拐翁小院留言本
  15. 其它
  16. 维兰网,https://site.xd94.com,维兰网2023版
复制代码
website.txt
回复

举报

麻木先生
发表于 7 天前 | 显示全部楼层
yaner 发表于 2025-3-22 13:17
web.php

弄了一个玩玩，感谢


http://5fm.dpdns.org/
回复

举报

inoking
 楼主| 发表于 7 天前 来自手机 | 显示全部楼层
yaner 发表于 2025-3-22 13:17
web.php



真心不错
回复

举报

发表于 5 天前 | 显示全部楼层
https://365.de.cool
无后台导航，
缺点：不支持手机自适应。
回复

举报

123
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|小黑屋|免费吧论坛

GMT+8, 2025-3-29 07:20 , Processed in 0.020372 second(s), 3 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表