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

时间：2019-05-28 07:53:54

标签： javascript html css

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

我已经尝试过仅在CSS / HTML中这样做，但这没用

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

    data = [temp1,temp2,temp3,Humidite, dioxyde_de_carbone, presence]

    layout = go.Layout(
        width = 800,
        height = 500,
        title = "fixed-ratio axes using 10 ticks",
        xaxis = dict(
        nticks = 10,
        title = "shared X axis showing DATE"
        ),
        yaxis = dict(
        scaleanchor = "x",
        title = "Temp"
        ),
        yaxis2 = dict(
        scaleanchor = "x",
        title = "Humidity"
        ),
        yaxis3 = dict(
        scaleanchor = "x",
        title = "ppm"
        ),
        yaxis4 = dict(
        scaleanchor = "x",
        title = "presence"
        ),
        showlegend= False
    )

    fig = go.Figure(data=data, layout=layout)
    plotly.offline.plot(fig, filename=str(DateDebut) +" a "+ str(DateFin) + ".csv", auto_open=True)
    fig = plotly.tools.make_subplots(rows=6, cols=1)

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

1 个答案:

答案 0 :(得分：0)

@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无法在堆栈溢出上工作

相关问题
最新问题