javascript - 我可以为我的子子菜单创建一个新区域吗？-6ren

javascript - 我可以为我的子子菜单创建一个新区域吗？

转载作者：行者123 更新时间：2023-11-27 23:54:29

我实际上是在为我的作业做一个菜单，但我不太擅长 JS，我想通过悬停在一个新的“窗口”上来扩展我的子子菜单

我已经尝试过只用 CSS/HTML 来做，但那没有用

https://codepen.io/anon/pen/JqBRGZ

<body>
  <div class="area-x"></div>
  <nav class="main-menu" id="accordian">
     <div>
        <ul>
           <li id="menu1">
              <h3><i class="fa fa-user fa-2x"></i><span class="nav-text">Client</span></h3>
              <ul>
                 <li><a href="#" id="menu2">test</a>
                    <ul>
                       <li id="menu3">
                          <a href="#">test11111111111</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                       </li>
                    </ul>
                 </li>
                 <li><a href="#" id="menu2">test</a>
                    <ul>
                       <li id="menu3">
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                          <a href="#">test1</a>
                       </li>
                    </ul>
                 </li>
              </ul>
           </li>

我想我可以用 javascript 做我想做的事，但我没有在互联网上找到我想要的东西，tuto 或类似的东西，所以如果你能帮助我解释一下，那就太好了。

最佳答案

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:150);

.fa-2x {
	font-size: 2em;
}

.fa {
	position: relative;
	display: table-cell;
	width: 60px;
	height: 36px;
	text-align: center;
	vertical-align: middle;
	font-size:20px;
}

.main-menu:hover,nav.main-menu.expanded {
	width:250px;
	overflow:visible;
}

.main-menu {
	background: #1f67f1;
	border-right:1px solid #e5e5e5;
	position:absolute;
	top:0;
	bottom:0;
	height:100%;
	left:0;
	width:60px;
	overflow:hidden;
	-webkit-transition:width .05s linear;
	transition:width .05s linear;
	-webkit-transform:translateZ(0) scale(1,1);
	z-index:1000;
}

.main-menu>ul {
	margin:7px 0;
}

.main-menu li {
	position:relative;
	display:block;
	width:250px;
}

.main-menu li>h3 {
	margin-top: 0px;
	position:relative;
	display:table;
	border-collapse:collapse;
	border-spacing:0;
	color:white;
 	font-family: arial;
	font-size: 14px;
	text-decoration:none;
	-webkit-transform:translateZ(0) scale(1,1);
	-webkit-transition:all .1s linear;
	transition:all .1s linear;
	margin: 0px;
}

.main-menu .nav-icon {
	position:relative;
	display:table-cell;
	width:60px;
	height:36px;
	text-align:center;
	vertical-align:middle;
	font-size:18px;
}

.main-menu .nav-text {
	position:relative;
	display:table-cell;
	vertical-align:middle;
	width:190px;
	font-family: 'Titillium Web', sans-serif;
}

.main-menu>ul.logout {
	position:absolute;
	left:0;
	bottom:0;
}

.no-touch .scrollable.hover {
	overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
	overflow-y:auto;
	overflow:visible;
}

h3:hover,h3:focus {
	text-decoration:none;
}

nav {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}

nav ul,nav li {
	outline:0;
	margin:0;
	padding:0;
}

.main-menu li:hover>a,nav.main-menu li.active>h3,.dropdown-menu>li>h3:hover,.dropdown-menu>li>h3:focus,.dropdown-menu>.active>h3,.dropdown-menu>.active>h3:hover,.dropdown-menu>.active>h3:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover h3,.dashboard-page nav.dashboard-menu ul li.active h3 {
	color:#fff;
	background-color: #1f67f1;
}

.area {
	float: left;
	background: #e2e2e2;
	width: 100%;
	height: 100%;
}

#accordian ul ul {
	display: none;
}

#accordian li.active ul {
	display: block;
}

#menu2 {
	margin-left: 110px;
	color: white;
	text-decoration: none;
	font-size: 18px;
	font-family: 'Titillium Web', sans-serif;
}

#menu1:hover h3 {
	color:#fff;
	background-color:#5fa2db;
}

#menu2 a:hover {
    color:#fff;
	background-color:#5fa2db; 
}

#menu2 ul li{
	position: relative;
}

#menu1 ul li:hover > ul{
	left: -100px;
	top:0px;
}

#menu2 ul li:hover > a{
	color:#fff;
	background-color:#5fa2db; 
	cursor: pointer;
	display: block;
}

#menu1 li:hover ul ul {
	display:none;
}

#menu1 li:hover ul {
	display:block;
}

#menu3 a {
    display:block;
	margin-left:200px;
	text-decoration: none;
	color: #FFF;
	overflow: visible;
}

.main-menu #menu3 a:hover{
	color:#fff;
	background-color:#5fa2db;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
      <meta charset='utf-8' />
      <meta http-equiv="X-UA-Compatible" content="IE=11" />
      <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="icons/css/unicons.css">
      <link rel="stylesheet" href="style.css">
      <script>
         function afficheMenu(obj){
         var idMenu     = obj.id;
         var idSousMenu = 'sous' + idMenu;
         var sousMenu   = document.getElementById(idSousMenu);
         /*****************************************************/
         /**	si le sous-menu correspondant au menu cliqué    **/
         /** est caché alors on l'affiche, sinon on le cache **/
         /*****************************************************/
         if(sousMenu.style.display == "none"){
         sousMenu.style.display = "block";
         }
         else{
         sousMenu.style.display = "none";
         }
         }
      </script>   
   </head>
   <body>
      <div class="area-x"></div>
      <nav class="main-menu" id="accordian">
         <div>
            <ul>
               <li id="menu1">
                  <h3><i class="fa fa-user fa-2x"></i><span class="nav-text">Client</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a>
                        <ul>
                           <li id="menu3">
                              <a href="#">test11111111111</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                           </li>
                        </ul>
                     </li>
                     <li><a href="#" id="menu2">test</a>
                        <ul>
                           <li id="menu3">
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </li>

               <li class="has-subnav" id="menu1">
                  <h3><i class="fa fa-user fa-2x"></i><span class="nav-text">Conducteur</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a>
                        <ul>
                           <li id="menu3">
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                              <a href="#">test1</a>
                           </li>
                        </ul>
                     </li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li class="has-subnav" id="menu1">
                  <h3><i class="fa fa-bus fa-2x"></i><span class="nav-text">Autocar</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-file-text-o fa-2x"></i><span class="nav-text">Devis</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-table fa-2x"></i><span class="nav-text">Billet</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-file fa-2x"></i><span class="nav-text">Bons Factures</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-file-text fa-2x"></i><span class="nav-text">Factures Diverses</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-binoculars fa-2x"></i><span class="nav-text">Recherche avancée...</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-home fa-2x"></i><span class="nav-text">Export des ventes</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-credit-card fa-2x"></i><span class="nav-text">Saisie des Règlements</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-bars fa-2x"></i><span class="nav-text">Gestion des bordereaux</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-list fa-2x"></i><span class="nav-text">Factures non soldées</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-thumbs-o-up fa-2x"></i><span class="nav-text">Export des Règlements</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-thumbs-up fa-2x"></i><span class="nav-text">Export des bordereaux</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-laptop fa-2x"></i><span class="nav-text">Modèles Hebdomadaires</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-tasks fa-2x"></i><span class="nav-text">Lignes Règulières</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-calendar fa-2x"></i><span class="nav-text">Affichage Planning</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>

               <li id="menu1">
                  <h3><i class="fa fa-bar-chart fa-2x"></i><span class="nav-text">Statistiques</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>
               
               <li id="menu1">
                  <h3><i class="fa fa-binoculars fa-2x"></i><span class="nav-text">Recherche avancée by evnt</span></h3>
                  <ul>
                     <li><a href="#" id="menu2">test</a></li>
                     <li><a href="#" id="menu2">test</a></li>
                  </ul>
               </li>
               </ul>
         </div>
         <ul class="logout">
            <li>					<h3><i class="fa fa-power-off fa-2x"></i>		<span class="nav-text">Quitter Carmagic</span></h3></li>
         </ul>
      </nav>
      </div>
   </body>
</html>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<!-- JQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
   $(document).ready(function(){
   	$("#accordian h3").click(function(){
   		$("#accordian ul ul").slideUp();
   		if(!$(this).next().is(":visible"))
   		{
   			$(this).next().slideDown();
   		}
   	})
   })
</script>

<script>
   $(document).ready(function(){
      $("#menu2").hover(function(){
         
      })
   })
</script>

我不知道为什么，但是我的 js 在堆栈溢出时没有工作

关于javascript - 我可以为我的子子菜单创建一个新区域吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56337477/

文章推荐： c++ - 使用 pushButton c++ QT 连接表单

文章推荐： c++ - 为什么我会收到创建基础类(class)的警告？

文章推荐： javascript - 为什么我的 EventListener 被调用两次？

winapi - 我应该如何处理 Direct2D 应用程序中的更新矩形/区域/区域？
在使用 GDI 进行图形处理的传统 Windows 程序中，您必须担心只绘制需要重绘的窗口区域；这是“更新矩形”，可以通过 PAINTSTRUCT.rcPaint 或通过调用 GetUpdateRec
TFS 混淆了团队、区域、项目、区域、迭代
我对 TFS 中的所有内容感到困惑。有人可以解释一下所有这些是如何组合在一起的吗？团队项目合集团队项目团队地区迭代来自 this page,我认为一个(团队)项目集合可以包含多个(团队)项
amazon-web-services - 区域/边缘优化 API 网关 VS 区域/边缘优化自定义域名
这对我来说根本没有意义。创建新的 API 网关时，您可以指定它是区域优化的还是边缘优化的。但话又说回来，当您为 API Gateway 创建自定义域名时，您可以在两者之间进行选择。最糟糕的是，您可以
vba - 循环遍历工作表中的区域/区域？
我有一个工作表，其中包含我想循环遍历的许多不同区域。我将进行一些计算，并认为它比在列中逐个单元格地更快/更有效。我尝试了一些不同的东西，但不知道如何跳到下一个区域。我已经发表了一些评论，最有希望的是
TFS 区域、优化定义和配置
最近迁移到 TFS 2010 后，我想知道对于区域而言，最佳或最广泛接受的定义或配置是什么？我能在网上找到的唯一有用的文章是 this one并且是我认为是正确的。然而，这让我开始思考是否以下任何一
Azure 生命周期管理 - 区域
我在“北欧”有一个存储帐户，现在我想使用生命周期管理将冷 blob 移动到存档层。但是我每次尝试都会遇到以下失败:无法为存储帐户“myStorageAccount”添加生命周期管理规则。错误:管理策
java 项目 - 区域
我正在开发一个项目，您在扫描仪中输入州的缩写，然后程序会告诉您该州位于美国的哪个地区。我认为我的大部分代码都是正确的，但我有以前从未使用过 switch。我已经将我的工作改进为一个错误，即我的第一个
AngularJS View /区域
我正在尝试学习 AngularJS，我想我有一个架构问题。如果我想开始开发一个应用程序，比方说，比如 youtube，我如何在“区域”(比如 Marionette)中组织页面？我的意思是:顶部导航栏
检查指针是否位于 malloc 区域？
我正在制作一个动态内存分配器，当我释放其中的一部分时，我需要检查我传递给函数的指针实际上是否在该区域内。我有一个指向 malloc 区域开头的指针 typedef unsigned char byte
javascript - 突出显示<区域>
有时我想看看到底在哪里页面上图片上的标签。在 Javascript 中有没有办法改变颜色或隐藏与区域标签对应的图像部分？最佳答案也许您正在寻找类似 mapper.js 的内容.它允许您在鼠标
javascript - 如何向图表添加高亮标记/区域？
我有一个使用 D3 js 创建的时间序列图表。我想为特定时间间隔添加高亮区域，以显示在该特定时间发生的特定事件(会有不同类型的事件，因此每个高亮标记将根据其类型具有不同的颜色)。我希望这个突出显示区域
php - 无法使用密码保护页面/区域
我正在尝试创建网站的密码保护区。我想通过检查 MySql 表中的用户名和密码来允许访问，然后启动一个 session 并允许在 session 处于事件状态时访问多个页面。如果有人尝试直接访问这些页面
ios - ScrollView 区域
在 ScrollView 中我添加了几个按钮。正如您在图片中看到的，2 个按钮完全可见，第三个按钮半可见。当我向右滚动看到第三个时；1-如果滚动条很短，则它会滚动回到第一个位置。2- 如果滚动足够则显
ios - 叠加场景/区域
我正在开发我的第一个 spritekit 应用程序，并且有一个关于如何处理我想到的事情的快速问题。我正在制作一个我想要的棋盘游戏原型(prototype)，并希望在 iOS map 中进行一些集思广益
c# - 区域 - 日期和时间问题
在我的 C# 程序中，我收到这样的日期和时间:DateTime.Now 我得到:19/09/2010 20:10:30 因为我的地区是:希伯来语(以色列) 但是如果我将我的程序安装在区域为 Engli
c# - 区域/结束区域预处理器
有时我在 Visual Studio 的源文件中运行(在我的例子中是 2010)，我看到很多区域，我必须点击 + 号才能一个一个地打开它们! 是否有任何快捷方式或菜单选项可以使这对我来说更容易，并且对
android - 试用期间存储文件的最佳位置/区域
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 7 年前。 Improve
algorithm - 在二维数据中查找峰值(区域)
我正在寻找二维数据中的峰值区域(如果您愿意，灰度图像或二维景观，通过霍夫变换创建)。峰值区域是指局部最大峰值，但不是单个点而是周围的一部分strong>contributing region 随之而
Java - 将字符或字符串转换为形状/区域
我希望能够将任何字符或字符串转换为形状或区域，以便我可以按照我喜欢的任何大小、样式、效果等来绘制该字符。更具体地说，我将使用视差绘制它，以便它仅在特定角度清晰定义(这就是为什么我不能使用 html
java - 仅渲染与主圆相交的圆的段/区域
我非常喜欢数学(或者你们大多数人会说的“数学”!)，但我还没有达到知道这个问题答案的程度。我有一个主圆，它可以在显示器上的任何 x 和 y 处有一个中心点。其他圆圈将随意在显示器周围移动，但在任何给定

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我可以为我的子子菜单创建一个新区域吗？