asked on

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 tures</a><br />
<a href="#!/page_Subvik">Sub vings</a><br />
<a href="#!/page_Subart">Sub antine 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>

Leonidas Dosas

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.

WO2015

ASKER

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/#!/

Member_2_248744

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.

WO2015

ASKER

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?

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

WO2015

ASKER

That worked, thank you!

WO2015

ASKER

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.

Member_2_248744

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?