J'essaie de créer un menu coulissant qui s'ouvre de gauche à droite. J'ai créé un bouton fléché séparé du menu et du menu lui-même qui est un rectangle blanc qui apparaît de gauche à droite.

J'ai quelques problèmes:

  1. tout d'abord, la flèche ne ressemble pas à une partie du menu coulissant qui est distinct de tous les autres composants.
  2. J'ai un bug étrange: lorsque j'ouvre le menu, il peut d'abord apparaître dans différentes tailles en fonction de la hauteur du contenu, puis la hauteur change de la même manière.
  3. Lorsque j'ouvre le menu coulissant, la hauteur du menu supérieur est étendue sans raison.

Avez-vous une idée de la façon de corriger ces bogues ou de rendre ce menu plus joli?

Le code du menu est le suivant:

  $(function () {
        $("#arrow_btn").click(function () {
            $("#navbar").toggleClass('active');
            $("#upper_left_menu").toggleClass('open_left_menu');
            console.log("look for arrow btn element");
            console.log("upper_left_menu", $("#upper_left_menu"));
            console.log('$("#navbar")', $("#navbar"));
        });

       $(".project_item").click(function (event) {
           var list = $(this).siblings();
           var i = $(this).find('i');
           $(list).toggleClass('closed_nested_list');
           if ($(i).hasClass('fa-plus')) {
               $(i).removeClass('fa-plus');
               $(i).addClass('fa-minus');
           } else {
               $(i).addClass('fa-plus');
               $(i).removeClass('fa-minus');
           }
           console.log('traverse over all project items');
           console.log('i', i);
           console.log('list', list);
       });

    });
 .arrow {
	    color: gray;
	    font: bold 11px "Helvetica";
	    padding: 2px;
	    text-decoration: none;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .arrow:after {
	    background: gray;
	    color: #FFF;
	    content: ">";
	    display: inline-block;
	    font: bold 11px "Georgia";
	    height: 25px;
	    line-height: 25px;
	    margin-left: 2px;
	    text-align: center;
	    width: 25px;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }
    .arrow:hover:after{
      background: #1679C6;
    }
    .upper_menu{
        position:relative;
        display:block;
        background-color: #F2F6F7;
        width: 100%;
        height: 20%;
    }
    .open_left_menu{
        background-color:white;
        width:30px;
        height:30px;
        box-shadow: 4px 0 5px rgba(0,0,0,0.2);
        z-index: 1;
        -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
    }
    #upper_left_menu{
    }
     #upper_right_menu{
        position: absolute;
        top: 0px;
        right: 0px;
    }

     #exclamation-triangle,
     #envelope{
         font-size: 24px;
     }

     .warning,
     .email{
         margin: 10px;
     }

     #exclamation_notifications_count,
     #email_notifications_count{
         padding-left: 5px;
     }

 #navbar {
        position: absolute;
        left: -16em;
        top: 0;
        bottom: 0;
        height: 100%;
        background-color: white;
        box-shadow: 4px 0 5px rgba(0,0,0,0.2);
        z-index: 1;
        cursor: pointer;
        margin-top: 26px;
        animation:  10s;
      }

    #navbar ul {
        width: 224px;
        list-style-type: none;
        margin: 0;
        padding: 1em;
    }

    /* hovering */
    #navbar, #navbar * {
        -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
    } 

    #navbar.active {
        left: 0px;
    }
    
    .nested_list{
        display:inline-block;
        visibility:visible;
    }
    .closed_nested_list{
        display:none;
    }

    .project_item{
        font-family:'Segue UI', Calibri, arial, verdana, sans-serif;
        font-size: 18px;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <span id="arrow_btn" class="arrow"></span>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i id="exclamation-triangle" class=" fa fa-exclamation-triangle"></i><span id="exclamation_notifications_count">2</span></a>
        <a href="#" class="email"><i id="envelope" class=" fa fa-envelope-o"></i><span id="email_notifications_count">5</span></a>
    </div>
</nav>
<nav id="navbar">
    <ul>
        <li class="project_container">
            <span class="project_item" >
                <i class="fa fa-plus"></i>  
                FDR Project
            </span>
            <ul id="listOne" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Niagara Project</span>
            <ul id="listTwo" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listThree" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listFour" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit03</li>
            </ul>
        </li>
    </ul>
</nav>
1
Brk 8 mars 2016 à 18:01

3 réponses

Meilleure réponse
  1. vous pouvez utiliser une icône géniale de police, puis son look sera beaucoup mieux
  2. lorsque vous ouvrez le curseur son ajouter un défilement sur la droite, je pense que c'est pourquoi il est étrange

edit1

En vous side-nav vous css est margin-top:26px. changez-le en 5% et la hauteur de la navigation en height:95%

1
Zamboney 8 mars 2016 à 15:21

Quelque chose comme ça?

$(function () {
        $("#arrow_btn").click(function () {
            $("#navbar, .upper_menu").toggleClass('active');
            $("#upper_left_menu").toggleClass('open_left_menu');
            console.log("look for arrow btn element");
            console.log("upper_left_menu", $("#upper_left_menu"));
            console.log('$("#navbar")', $("#navbar"));
        });

       $(".project_item").click(function (event) {
           var list = $(this).siblings();
           var i = $(this).find('i');
           $(list).toggleClass('closed_nested_list');
           if ($(i).hasClass('fa-plus')) {
               $(i).removeClass('fa-plus');
               $(i).addClass('fa-minus');
           } else {
               $(i).addClass('fa-plus');
               $(i).removeClass('fa-minus');
           }
           console.log('traverse over all project items');
           console.log('i', i);
           console.log('list', list);
       });

    });
.arrow {
  color: gray;
  font: bold 11px "Helvetica";
  padding: 2px;
  text-decoration: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.arrow:after {
  background: gray;
  color: #FFF;
  content: ">";
  display: inline-block;
  font: bold 11px "Georgia";
  height: 25px;
  line-height: 25px;
  margin-left: 2px;
  text-align: center;
  width: 25px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.arrow:hover:after {
  background: #1679C6;
}

.upper_menu {
  position: absolute;      
  display: block;
  background-color: #F2F6F7;
  width: 100%;
  top: 0;
  right: 0;
}

#upper_left_menu {
  width: 30px;
  height: 30px;
  z-index: 1;
  -webkit-transition: all 600ms ease;
  -moz-transition: all 600ms ease;
  -ms-transition: all 600ms ease;
  -o-transition: all 600ms ease;
  transition: all 600ms ease;
}

.open_left_menu {
  margin-left: 256px;
}

#upper_right_menu {
  position: absolute;
  top: 0px;
  right: 0px;
}

#exclamation-triangle,
#envelope {
  font-size: 24px;
}

.warning,
.email {
  margin: 10px;
}

#exclamation_notifications_count,
#email_notifications_count {
  padding-left: 5px;
}

#navbar {
  position: absolute;
  left: -16em;
  top: 0;
  bottom: 0;
  background-color: white;
  box-shadow: 4px 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
  cursor: pointer;
  animation: 10s;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar ul {
  width: 224px;
  list-style-type: none;
  margin: 0;
  padding: 1em;
}


/* hovering */

#navbar,
#navbar * {
  -webkit-transition: all 600ms ease;
  -moz-transition: all 600ms ease;
  -ms-transition: all 600ms ease;
  -o-transition: all 600ms ease;
  transition: all 600ms ease;
}

#navbar.active {
  left: 0px;
}

.nested_list {
  display: inline-block;
  visibility: visible;
}

.closed_nested_list {
  display: none;
}

.project_item {
  font-family: 'Segue UI', Calibri, arial, verdana, sans-serif;
  font-size: 18px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <span id="arrow_btn" class="arrow"></span>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i id="exclamation-triangle" class=" fa fa-exclamation-triangle"></i><span id="exclamation_notifications_count">2</span></a>
        <a href="#" class="email"><i id="envelope" class=" fa fa-envelope-o"></i><span id="email_notifications_count">5</span></a>
    </div>
</nav>
<nav id="navbar">
    <ul>
        <li class="project_container">
            <span class="project_item" >
                <i class="fa fa-plus"></i>  
                FDR Project
            </span>
            <ul id="listOne" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Niagara Project</span>
            <ul id="listTwo" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listThree" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listFour" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="../images/engine-lighting-bolt.png" />     Unit03</li>
            </ul>
        </li>
    </ul>
</nav>
1
NiZa 8 mars 2016 à 15:44

Après avoir opté pour les solutions de niza, j'ai eu un cas étrange que la flèche soit loin du menu et qu'il y ait un espace entre le menu et la flèche: entrez la description de l'image ici

0
Brk 8 mars 2016 à 15:44