White Maskers White Maskers - 2 months ago 7
CSS Question

how to display the sub-menu items in this drop-down menu



function rotateIcon(m) {
var key = m;
if ( key === 1)
{

if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-chevron-right")
{

document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";

}
else
{
document.getElementById("first-drop-down-icon").className = "spinner-icon in fa fa-chevron-right";
document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
document.getElementById("third-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
}


}
else if(key === 2)
{
if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-chevron-right")
{

document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-chevron-right";
}
else
{
document.getElementById("second-drop-down-icon").className="spinner-icon in fa fa-chevron-right";
document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
document.getElementById("third-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
}
}
else if(key === 3)
{
if(document.getElementById("third-drop-down-icon").className=="spinner-icon in fa fa-chevron-right")
{

document.getElementById("third-drop-down-icon").className="spinner-icon out fa fa-chevron-right";
}
else
{
document.getElementById("third-drop-down-icon").className="spinner-icon in fa fa-chevron-right";
document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
}
}
else if(key === 4)
{
if(document.getElementById("fourth-drop-down-icon").className=="spinner-icon in fa fa-chevron-right")
{

document.getElementById("fourth-drop-down-icon").className="spinner-icon out fa fa-chevron-right";
}
else
{
document.getElementById("fourth-drop-down-icon").className="spinner-icon in fa fa-chevron-right";
document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
document.getElementById("third-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
}
}
else{
document.getElementById("third-drop-down-icon").className="spinner-icon out fa fa-chevron-right";
document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-chevron-right";
document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
}
}

//----------------------------display sub menu starts here---------------------------------------------------//

function displaySubMenu(e) {
var k = e;
if (k === 1) {
if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-chevron-right"){
document.getElementById("sub-menu-one").style.display= "";
alert("hai i'm in,you don't see me?");
}
else{
document.getElementById("sub-menu-one").style.display = "block";
alert("bro..this is my problem,the sub menu is not displaying...!");
document.getElementById("sub-menu-two").style.display = "";
document.getElementById("sub-menu-three").style.display = "";
document.getElementById("sub-menu-four").style.display = "";
}
} else if (k === 2) {
if(document.getElementById("second-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){
document.getElementById("sub-menu-two").style.display= "";
}
else{
document.getElementById("sub-menu-two").style.display = "block";
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-three").style.display = "";
document.getElementById("sub-menu-four").style.display = "";}
} else if (k === 3) {
if(document.getElementById("third-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){
document.getElementById("sub-menu-three").style.display= "";
}
else{
document.getElementById("sub-menu-three").style.display = "block";
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-two").style.display = "";
document.getElementById("sub-menu-four").style.display = "";}
} else if (k === 4) {
if(document.getElementById("fourth-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){
document.getElementById("sub-menu-four").style.display= "";
}
else{
document.getElementById("sub-menu-four").style.display = "block";
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-three").style.display = "";
document.getElementById("sub-menu-two").style.display = "";}
} else {
document.getElementById("sub-menu-one").style.display = "";
document.getElementById("sub-menu-two").style.display = "";
document.getElementById("sub-menu-three").style.display = "";
document.getElementById("sub-menu-four").style.display = "";
}
}

.menu-part{
margin-top: 120px;
}
.menu-parent{
color: #a6afbb;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05rem;
padding: 12px 15px!important;
margin: 20px 0 0 -15px;
font-family: 'Poppins',sans-serif;
}
.sub-menu{
display: none;
}
.sub-menu-parent{
padding-left: 10px;
padding-top: 25px;
font-weight: 300;
color: black;
}
.sub-menu-header{
/* float: left;*/
padding-left:11px;
font-weight: 300;
font
}
.fa.spinner-icon{
float: right;
padding-right: 0px;
font-weight: 100;
}
.fa-sliders.menu-front-icon{
transform: rotate(90deg);
}
.sub-menu-parent:hover{
cursor: pointer;
}
.spinner-icon{
/* font-size:13px;
float: right;
margin-top: 5%;
margin-right: 7%;*/
transition: all 0.6s ease-in-out;
/*opacity:0.75;*/
}
/*.fa.spinner-icon{
font-size: 13px;
}*/
.spinner-icon.in{
transform: rotate(90deg);
}
.spinner-icon.out{
transform:rotate(0deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<ul class="menu-part">
<li>
<ul class="menu-parent">--- MAIN MENU

<li class="sub-menu-parent" id="sub-menu-one" onclick="displaySubMenu(1);rotateIcon(1);"><i class="flip-menu-main-icon fa fa-sun-o"></i><span class="sub-menu-header">Dashboard</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i>
<ul id="sub-menu-one" class="sub-menu">
<li> <a href="#">Minimalistic</a> </li>
<li> <a href="#">Demographical</a> </li>
<li> <a href="#">Analetical</a> </li>
<li> <a href="#"> Simpler </a> </li>
</ul>
</li>

<li class="sub-menu-parent" id="sub-menu-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="menu-front-icon fa fa-envelope-o"></i><span class="sub-menu-header">Apps</span> <i id="second-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> </li>
<ul id="sub-menu-one" class="sub-menu">
<li> <a href="#">Inbox</a> </li>
<li> <a href="#">Condact</a> </li>
<li> <a href="#">Calendar</a> </li>
</ul>

<li class="sub-menu-parent" id="sub-menu-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="menu-front-icon fa fa-sliders"></i><span class="sub-menu-header">UI Elements</span><i id="third-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i>
<ul id="sub-menu-two" class="sub-menu">
<li> <a href="#">Header</a> </li>
<li> <a href="#">Aside</a> </li>
<li> <a href="#">Footer</a> </li>
</ul>
</li>
<li class="sub-menu-parent" id="sub-menu-four" onclick="displaySubMenu(4);rotateIcon(4);"><i class="menu-front-icon fa fa-file-code-o"></i><span class="sub-menu-header">Forms</span><i id="fourth-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i>
<ul id="sub-menu-two" class="sub-menu">
<li> <a href="#">Header</a> </li>
<li> <a href="#">Aside</a> </li>
<li> <a href="#">Footer</a> </li>
</ul>
</li>
</ul>





in the above code i'm trying to implement a drop-down menu with two functionalities.when click on a menu item,


  1. icon associated with each menu item need to be rotate 90deg(it's working properly).

  2. sub menu items associated with corresponding menu item need to be displayed. (not working)



i tried to put an alert message inside the
javascript
code to check is there any problem,but it's working.i want to fix this error ,how can i fix this?

Answer

Part of your problem starts with the id sub-menu-one, sub-menu-two, etc... You should only use these id's once. You have the outer list with class sub-menu-parent with an id equal to the child ul id. Removing the id from the parent allows the submenu to become visible.

It also appears that some of your id's in HTML may have a copy past error, for example the child ul list of parent 2 has a id of sub-menu-one

https://jsfiddle.net/qp4g5wuw/1/