Create Drop Down Menu on Website

Hello,

I had a ticket out to add a drop down menu to my website. The code I received worked. The problem now when I go to add items to another link, it does not work on that link. I am looking for a simple way to have drop down's on my menu. Below is what I have in place now which works but only for 1 link.

Website(http://evangelosdesigns.com/#!/)

HTML:
<nav class="menu">
<ul id="menu">
  <li><a href="#!/page_Evangelos">Evangelos</a></li>
  <li><a href="#!/page_Services">Features</a></li>
  <li><a href="#!/page_Gallery">Gallery</a>
       <div>
       <a href="#!/page_Subvices">Sub&nbsp;tures</a><br />
       <a href="#!/page_Subvik">Sub&nbsp;vings</a><br />
       <a href="#!/page_Subart">Sub&nbsp;antine&nbsp;Art</a>
       </div>
  </li>
  <li><a href="#!/page_Carvings">Byzantine Art</a></li>
  <li><a href="#!/page_Carvings">Sculptures</a></li>
  <li><a href="#!/page_Carvings">Carvings</a></li>
  <li><a href="#!/page_Contacts">Contacts</a></li>
</ul>
</nav>


CSS:
.menu { float:right; padding-top:36px;}
#menu > li { float:left; margin-left:30px; position:relative;}
#menu > li div{
display: none;
text-align: center;
position: absolute;
top:22px;
left: -20px;
background: #ccc;
padding: 3px;
border-radius: 8px
}
#menu > li > a{/* display:block;*/ font:17px 'Asap', sans-serif; color:#fff; text-shadow:1px 1px rgba(0,0,0,.5);}
#menu > li > a:hover, #menu > .active > a{background: blue; }


JAVA:
<script>
var lis = document.getElementById("menu").getElementsByTagName("li");
lis[2].children[0].onclick = function (event) { // the index 2 is the Gallery
event.preventDefault();

var div1 = this.parentElement.getElementsByTagName("div")[0];
if (div1.style.display == "inline-block") div1.style.display = "none";
else div1.style.display = "inline-block";
}

</script>
WO2015Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
Hi. Check this CSS solution:
HTML:
  	<nav class="menu">
<ul id="menu">
  <li><a href=".!/page_Evangelos">Evangelos</a></li>
  <li><a href=".!/page_Services">Features</a></li>
  <li><a href=".!/page_Gallery">Gallery</a>       
	   <ul>
	    <li><a href=".!/page_Subvices">Sub&nbsp;tures</a></li>
		<li><a href=".!/page_Subvik">Sub&nbsp;vings</a></li>
		<li><a href=".!/page_Subart">Sub&nbsp;antine&nbsp;Art</a></li>
	   </ul>
  </li>
  <li><a href=".!/page_Carvings">Byzantine Art</a></li>
  <li><a href=".!/page_Carvings">Sculptures</a></li>
  <li><a href=".!/page_Carvings">Carvings</a></li>
  <li><a href=".!/page_Contacts">Contacts</a></li>
</ul>
</nav>

Open in new window


CSS:
  .menu ul
{
	list-style:none;
	position:relative;
	float:right;
	margin:0;
	padding:0
}

.menu ul a
{
	display:block;
	color:.333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	
}

.menu ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

.menu ul li.current-menu-item
{
	background:.ddd
}

.menu ul li:hover
{
	background:.f6f6f6
}

.menu ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:.fff;
	padding:0
}

.menu ul ul li
{
	float:none;
	width:200px
}

.menu ul ul a
{
	line-height:120%;
	padding:10px 15px
}

.menu ul ul ul
{
	top:0;
	left:100%
}

.menu ul li:hover > ul
{
	display:block
}

Open in new window


Instead of div I am using a new ul and hover setting in css.
WO2015Author Commented:
Thank you,

When I added that it messed up my who page. Moved the nave to the middle and isnt displaying anyhting. Below is the actual test site I am using and how it looks currently. I just want to add another drop down how I have under Gallery.

http://doeringdesign.com/ED/#!/
Slick812Commented:
OK, In the code you show, there is a added container for a "drop down sub menu" as a <div> , with two links <a> in it.
So I guess you tried to add another <div> to an <li> to have a second drop down? ? But I also guess that the drop down would not show when the second <li> was touched ? ?

In the javascript, the click (touch) event set up here -
      lis[2].children[0].onclick
is ONLY for the third <li> because it has the array of <li> as element 2 -  lis[2].  -
so No other drop down will have code to do anything?

I have now added a second <li> as a drop down, and changed the javascript for array of <li> elements for two events as -
      lis[2].children[0].onclick = lis[3].children[0].onclick =function (event) {

I have also changed the CSS for the drop downs to be more consistent in the look of the parent menu.
   CSS
<style>
.menu { float:right; padding-top:36px;}
#menu > li { float:left; margin-left:30px; position:relative;}

#menu > li div{
display: none;
text-align: center;
position: absolute;
top:22px;
left: -10%;
color: white;
padding: 3px;
border: 2px solid white;
border-radius: 8px;
}

#menu > li div > a{
color: white;
font: 17px 'Asap', sans-serif;
text-decoration: none;
text-shadow: 1px 1px rgba(0,0,0,0.5);
-webkit-transition: all 0.5s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}

#menu > li div > a:hover{
color: #954;
}

#menu > li > a{/* display:block;*/ font:17px 'Asap', sans-serif; color:#fff; text-shadow:1px 1px rgba(0,0,0,.5);}
#menu > li > a:hover, #menu > .active > a{background: blue; } 

</style>

Open in new window


    HTML
<nav class="menu">
<ul id="menu">
  <li><a href="#!/page_Evangelos">Evangelos</a></li>
  <li><a href="#!/page_Services">Features</a></li>
  <li><a href="#">Rooms Galleries</a>
       <div>
       <a href="#!/page_FurnArture">FurnArture&nbsp;Gallery</a><br />
       <a href="#!/page_KitchenBath">Kitchen&nbsp;and&nbsp;Bath&nbsp;Gallery</a><br />
       </div>
  </li>
  <li><a href="#">Art Galleries</a>
       <div>
       <a href="#!/page_Byzantine">Byzantine&nbsp;Art</a><br />
       <a href="#!/page_Sculptures">Sculptures</a><br />
       <a href="#!/page_Carvings">Carvings</a><br />
       </div>
</li>
  <li><a href="#!/page_Contacts">Contacts</a></li>
</ul>
</nav>

<script>
var divs = document.getElementById("menu").getElementsByTagName("div");
for (var i=0; i<divs.length; i++)divs[i].onclick =function(){this.style.display = "none";}
var lis = document.getElementById("menu").getElementsByTagName("li");
lis[2].children[0].onclick = lis[3].children[0].onclick =function (event) {
event.preventDefault();

var div1 = this.parentElement.getElementsByTagName("div")[0];//
if (div1.style.display == "inline-block") div1.style.display = "none";
else div1.style.display = "inline-block";
}

</script>

Open in new window


I thought to have this be more consistant by using the Jquery code instead of javascript raw, but I do not have time today to redo. Hope you see what you can do to change your menu to get different factors of display.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

WO2015Author Commented:
Thank you, you actually wrote this code the first time. This worked except the box stays up and over laps the other one once clicked. How can I avoid that?

Untitled.png
Slick812Commented:
I do not have time now to expand the menu event properties now, but just from memeory you might try -
<script>
var showing = null;
var divs = document.getElementById("menu").getElementsByTagName("div");
for (var i=0; i<divs.length; i++)divs[i].onclick =function(){this.style.display = "none";}
var lis = document.getElementById("menu").getElementsByTagName("li");
lis[2].children[0].onclick = lis[3].children[0].onclick =function (event) {
event.preventDefault();

var div1 = this.parentElement.getElementsByTagName("div")[0];//
if (showing) showing.style.display = "none";

if (div1.style.display == "inline-block")  {
  div1.style.display = "none";
  showing = null;
  } else {
  div1.style.display = "inline-block";
  showing = div1;
  }
}

</script>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WO2015Author Commented:
That worked, thank you!
WO2015Author Commented:
Hello,

I did notice 1 small thing with the drop down. It doesn't go away when you click another link. How can I make it disappear once another link is clicked.
Slick812Commented:
OK, , To add to the click events of ALL <a> links in this menu thing, becomes more complex, because the other <a> already have the click events assigned in the javascript file  content_switch.js as  
function(){
  _.li.each(function(n){
    var th=$(this)
    $('a',th).click(function(){ // THE A CLICK FUNCTION
      _.chngFu(n)
      if(_.contRetFalse)
      return false
      })									
    })
  }

Open in new window


So I can not over-write their click assignments, But I have tried another way, that is to catch the <a> clicks on the page bubble up in the
       <ul id="menu">
element. To use a way to detect the the <a> with a Sub Menu, I had to add a Class as "submenu0" , like this -
     <a class="submenu0" href="#">Rooms Galleries</a>

I did not change the CSS from my last comment CSS so the CSS is the same,
so here is the code that works for me in fierfox -
<nav class="menu">
<ul id="menu">
  <li><a href="#!/page_Evangelos">Evangelos</a></li>
  <li><a href="#!/page_Services">Features</a></li>
  <li><a class="submenu0" href="#">Rooms Galleries</a>
       <div>
       <a href="#!/page_FurnArture">FurnArture&nbsp;Gallery</a><br />
       <a href="#!/page_KitchenBath">Kitchen&nbsp;and&nbsp;Bath&nbsp;Gallery</a><br />
       </div>
  </li>
  <li><a class="submenu0" href="#">Art Galleries</a>
       <div>
       <a href="#!/page_Byzantine">Byzantine&nbsp;Art</a><br />
       <a href="#!/page_Sculptures">Sculptures</a><br />
       <a href="#!/page_Carvings">Carvings</a><br />
       </div>
</li>
  <li><a href="#!/page_Contacts">Contacts</a></li>
</ul>
</nav>


<script>
var showing = null;

document.getElementById("menu").onclick = function (event) {
  if (event.target.tagName.toLowerCase() === 'a') {
    if (event.target.className == "submenu0") {
      event.preventDefault();
      var div1 = event.target.parentElement.getElementsByTagName("div")[0];
      if (showing && (showing != div1)) {
        showing.style.display = "none";
        showing = null;
        }
      if (div1.style.display == "inline-block") {
      div1.style.display = "none";
      showing = null;
      } else {
      div1.style.display = "inline-block"; 
      showing = div1;
      }
    } else if(showing) {
      showing.style.display = "none";
      showing = null;
     }
	 
    } // if tagName == 'a')
  }// ("menu").onclick

</script>

Open in new window


I can NOT test it with the content_switch that you use here, but It may work with that and allow that to keep switching content. And you MUST add the class="submenu0" to the <a> with the <div> sub menus

=== = = = = = = = =
This site for Evangelos Designs looks good visually on a laptop, BUT I viewed it in my phone browser in portrait, and It does NOT look good!, The top menu that you work on here in this question, is so small I could not use it and the Background Image of the room view goes smaller BUT it does NOT cover and looks bad to me. Since all most All views these days are now on phones, you may need to consider a better setup for phones?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.