添加导航

Author: 黄佰荣

.gitignore

@@ -39,3 +39,4 @@ nosetests.xml
 .idea
 qpython-docs/venv/*
 qpython-docs/build/*
+qpython-docs/static/*

qpython-docs/index.html

@@ -12,6 +12,7 @@
 <link rel="stylesheet" href="https://chat.pgpt.cloud/index.css"/-->
 <script src="static/jquery.min.js"></script>
 <script src="static/bootstrap.min.js"></script>
+<script src="static/web.js?v=1"></script>
 
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
@@ -54,6 +55,13 @@
 				<li><a href="https://x.com/qpython" target="_blank">News</a></li>
 				<li><a href="https://discord.gg/hV2chuD" target="_blank">Discuss</a></li>
 				<li><a href="https://www.youtube.com/@qpythonplus" target="_blank">YouTube</a></li>
+				<li class="li-sub">
+					<a href="javascript:;">Qpython+</a>
+					<ul class="submenu">
+						<li><a target="_blank" href="https://www.qpython.com.cn"> ZH </a></li>
+						<li><a target="_blank" href="https://www.qpython.com"> EN </a></li>
+					</ul>
+				</li>
 
 				<!--li>
 					<a href="http://www.aipy.org">AIPY</a>

qpython-docs/source/qpython_theme/layout.html

@@ -15,6 +15,7 @@
 
     <script src="/static/jquery.min.js"></script>
     <script src="/static/bootstrap.min.js"></script>
+    <script src="/static/web.js?v=1"></script>
     <link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">
     <!--link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script-->
@@ -49,6 +50,13 @@
             <li><a href="https://x.com/qpython" target="_blank">News</a></li>
             <li><a href="https://discord.gg/hV2chuD" target="_blank">Discuss</a></li>
             <li><a href="https://www.youtube.com/@qpythonplus" target="_blank">YouTube</a></li>
+            <li class="li-sub">
+					<a href="javascript:;">Qpython+</a>
+					<ul class="submenu">
+						<li><a target="_blank" href="https://www.qpython.com.cn"> ZH </a></li>
+						<li><a target="_blank" href="https://www.qpython.com"> EN </a></li>
+					</ul>
+				</li>
 
             <!--li>
                 <a href="http://www.aipy.org">AIPY</a>

qpython-docs/source/qpython_theme/static/qpython_theme.css

@@ -47,6 +47,56 @@ a {
 	color: #4A4A4A;
 	letter-spacing: 0.27px;
 }
+#example-navbar-collapse li.li-sub{
+	position: relative;
+}
+
+#example-navbar-collapse li.li-sub .submenu::before {
+  content: '';
+  position: absolute;
+  top: -10px; /* 与 margin-top 相同的值 */
+  left: 0;
+  width: 100%;
+  height: 10px; /* 与 margin-top 相同的值 */
+}
+#example-navbar-collapse li.li-sub .submenu {
+	color: black;
+	display: none; /* 默认隐藏 */
+	position: absolute; /* 绝对定位 */
+	top: 100%; /* 相对于父菜单的底部 */
+	left: 0; /* 与父菜单左对齐 */
+	min-width: 100px;
+	background-color: #000;
+	max-width: 1000px;
+	border-radius: 5px;
+	margin-top: 5px;
+}
+#example-navbar-collapse li.li-sub .submenu li{
+	font-size: 13px;
+	display: block;
+	text-align: left;
+	margin: 5px;
+}
+#example-navbar-collapse li.li-sub:hover .submenu{
+	display: block;
+}
+@media screen and (max-width: 768px) {
+	#example-navbar-collapse li.li-sub{
+		height: auto;
+	}
+	#example-navbar-collapse li.li-sub .submenu {
+		margin-top: -10px;
+		width: 100%;
+		position: unset;
+	}
+	#example-navbar-collapse li.li-sub .submenu li{
+		text-align: center;
+		width: 100%;
+		color: white;
+		margin: 0;
+	}
+}
+
 
 @media screen and (min-width: 768px) {
 	header {
@@ -351,8 +401,10 @@ a {
 /************doc css****************/
 @media screen and (min-width: 768px) {
 	#example-navbar-collapse {
-		overflow-y: auto !important;
+		/*overflow-y: auto !important;*/
 	}
+
+
 	.doc-content {
 		margin-top: 80px;
 	}

qpython-docs/source/qpython_theme/static/web.js

@@ -0,0 +1,18 @@
+jQuery(function($) {
+    submenu_init();
+});
+
+// mobile 二级目录的点击功能
+function submenu_init() {
+    // 判断当前屏幕
+    jQuery('#example-navbar-collapse li.li-sub').click(function (event) {
+        event.stopPropagation(); // 阻止事件冒泡
+        let ele = jQuery(this).find('.submenu');
+        // 判断显示隐藏
+        if (ele.is(':visible')) {
+            ele.hide();
+        } else {
+            ele.show();
+        }
+    })
+}