asked on

CSS Mega Menus

Dear Experts,

It's about CSS Mega Menus. I hope you could help me on this because I have been trying
to figure out how to make mouseover menu/submenu background changing color working.
Please see the attachment what I am trying to do but without success. Also, view
the CSS and HTML code and what I am missing to make mouseover menu:

CSS:
<style type="text/css">

/*#mainmenu
{
width : 1000px;
display: inline-block;
float : left;
overflow : hidden;
background-color : Red;
text-indent : 12px;
}
*/

#mlddm
{      visibility:visible;
      margin: 0;
      padding: 0 ;
      padding-top: 3px;
      background: #464646;
      /*background: #2d4262;*/
      height: 25px;
      width: 1004px;
      color: White;
      font-weight : bold; font-family : Calibri;
      font-size : 12pt;
      text-indent : 25px;
      border-top: solid 3px white;
       border-bottom: solid 3px #2b4262;



      }

      #mlddm .hover
{
      background: red;
      display:block;


      }

.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
margin-top: 10px;
background: transparent ;
border: 1px solid #899fc0;
border-width: 2px 2px;
padding:10px;
font: normal 12px Verdana;
z-index: 100;
color: White;
}

.megamenu .column{
float: left;
width: 165px; /*width of each menu column*/
margin-right: 5px;
background: white;
color: Navy;
}

.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.megamenu .column ul li{
padding-bottom: 5px;
}

.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}

.megamenu .column ul li a{
text-decoration: none;
color:black ;
}

.megamenu .column ul li a:hover{
color: green;
font-weight : bold;
background-color : Yellow;
display : block;

}
</style>

<script type="text/javascript" src="jkmegamenu.js">

/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
//jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
jkmegamenu.definemenu("megaanchor1", "megamenu2", "mouseover")
jkmegamenu.definemenu("megaanchor2", "megamenu3", "mouseover")

</script>

HTML:

<div id="mlddm" class="hover">
<%--<div id="mlddm" style ="margin-left : 10px; margin-top : 5px">--%>

<span id="megaanchor">Home</span> 


<span id="megaanchor1" style="cursor: pointer; margin-left : 15px; " >Location     </span>


<div id="megamenu2" class="megamenu">

<div class="column">
      <h3>New York</h3>
      <ul>
      <li><a href="#">Account Policy</a></li>
      <li><a href="#"> New Accounts</a></li>
      <li><a href="#">User Activity</a></li>
      <li><a href="#"> Data </a></li>

      </ul>
</div>

<div class="column">
      <h3>San Francisco</h3>
      <ul>
      <li><a href="#">NewsLetters</a></li>
      <li><a href="#">Emails</a></li>
      <li><a href="#">Archives</a></li>
      <li><a href="#">TV New</a></li>
      </ul>
</div>

<br style="clear: left" /> 

<div class="column">
      <h3>Chicago</h3>
      <ul>
      <li><a href="#">Search</a></li>
      <li><a href="#">Arts</a></li>
      <li><a href="#">Newapapers</a></li>
      <li><a href="#">Magazines</a></li>

      </ul>
</div>

<div class="column">
      <h3>New Orleans</h3>
      <ul>
      <li><a href="#">Help</a></li>
      <li><a href="#">August</a></li>
      <li><a href="#">List of Music</a></li>
      <li><a href="#">Photos</a></li>
      </ul>
</div>

</div>


<span id="megaanchor2" style="cursor: pointer; margin-left : 15px" >Teachers     </span>


<div id="megamenu3" class="megamenu">

<div class="column">
      <h3>Teachers</h3>
      <ul>
      <li><a href="#">Math</a></li>
      <li><a href="#">Photography</a></li>
      <li><a href="#">Science</a></li>

      </ul>
</div>

<br style="clear: left" />
<br style="clear: left" />

<div class="column">
      <h3>Students</h3>
      <ul>
      <li><a href="#">Name</a></li>
      <li><a href="#">Class</a></li>
      </ul>
</div>
</div>
</div>

I don't need any link, I would like your CSS expertise to solve it. Your attention and
help is very much appreciative. Thank you. Css-Mega-Menu.doc

Rartemass

The easy way is to use pure CSS and use the pseudo classes for the <a> tag.

Basically have the a:hover settings in CSS to change the color and other styles as desired.
The pseudo tags are link, visited, hover, and active. They MUST be listed in that order to make sure they work correctly. To remember the order think of love/hate (LV, link, visted; HA, hover, active)

More info here:
http://www.w3schools.com/CSS/css_pseudo_classes.asp

IE has some issues with these pseudo tags so you may need to add Javascript to make it work in IE. It should be fine for links but as you are using an LI then you will need java (example below). Then in the CSS just call on the over class (eg li.over ul {})

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Open in new window

Rartemass

So in the CSS, you would have something like the below.

li:hover ul, li.over ul {
	display: block;
        color: #7d6340;
	padding: 1.25em 1.25em 0.25em 0.25em;
        border: 0.25em;
}

Open in new window

slb2008

ASKER

Hi Rartemass,
Thanks for your quick response. I am going to test it. I hope it works for another browsers like FireFox, Opera...I'll let you know

slb2008

ASKER

Rartemass,

I have been trying and nothing is working. Did you see my attached file? Have you seen the sports authority megamenus. That's what I am trying to work on it, but without results. In attached file the first megamenu is working well, but I would like to see the the way blue megamenu is. Hope you could help me what am i missing. Thanks.

Rartemass

I have thrown together a basic page for your menu (files below).
The js file needs to go into a folder called Script in order to work.

I have only tested in firefox and chrome, but the java will allow it to work in IE (IE has been blocked on this PC).
You may have to play with the spacing to be fully browser compatible. This is in the CSS file and is the negative positioning value for the top margin. You will find this code down the bottom.

This is a basic method to do what you want, there are many others. The CSS code has some redundancies and ccan be re-worked to clean up some entries, but currently it does work as is.

To add the yellow line down the middle, I applied a right border to each LI on the left.

The code below is meant as a starting point and has the layout and config done so you just need to play with it to get it perfect (ie colours, border width, spacing, etc).

Please let me know if you have any questions.

test.css
test.html
top-menu.js

slb2008

ASKER

Rartemass,
Thank you so much for the samples files you sent . In html file there is a line that shows <script type="text/javascript" src="Script/drop_menu.js"> . Maybe you forgot to attach the drop_menu.js file. I am not sure if the drop_menu.js file is necessary.
But I can tell you I am pleased with results but I'll be back to you later after tested the samples.

slb2008

ASKER

Rartemass;
One more question:
Please see the attached file and how to mouseover menu and dropdown one color at same time?
Which line of CSS code I can add to make the mouseover menu/dropdown one color effect. Hope to hear from you soon.
Thanks.

megamenu-layout.doc

Rartemass

I grabed the js from a site of mine. The two files perform a similar function; one is for vertical menus and the other for horizontal menus.
I have attached the other file below.

drop-down.js

ASKER CERTIFIED SOLUTION

Rartemass

membership

This solution is only available to members.

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

Start Free Trial

slb2008

ASKER

Thanks for the code. It's all right. Now I have another attached file for your review, and please I hope you could help me on this one I would like to see as mega menu for my web page. This is the last time before I close this solution. Sorry to bother you for asking too much help from you. Sincerely thanks.
Another-MegaMenu-Layout.doc

Rartemass

So basically you want to add in a third column to the menu?
You would do this the same as the others.

How I have the code, each item in the menu has a class (in HTML). So in the below, each li has its own element that can be specified in the CSS.
<li class="title2"><a href="San Francisco.htm">San Francisco</a></li>
<li class="col2a"><a href="nletters.htm">Newsletters</a></li>
<li class="col2b"><a href="email.htm">Emails</a></li>
<li class="col2c"><a href="Archives.htm">Archives</a></li>
<li class="col2d"><a href="tv.htm">TV New</a></li>
<li class="title2a"><a href="New Orleans.htm">New Orleans</a></li>

For the third column, you will add in <li class="title3"><a blah blah blah></li>
The sub item would be class="col3a" etc.

Then in the CSS use the below. The margin-left would be pushed over to the end of the second column.

#nav .title3 {
background-color: #000099;
border-bottom: dotted 0.2em #ffffff;
margin-top: -17.35em;
margin-left: 16.4em;
line-height: 1.2em;
}

Assuming the same number if items in the menu, you would go down (margin-top) in the same incriments.
You can add the vertical line in the same manner as column 1, just add it into each element of column 2 as a rigth border or to each element in column 3 as a left border.

You can repeat this for four, five... 10,000 columns. Though if you did that I would recommend a different process.

slb2008

ASKER

Thanks for your time and help. I got it. You will get the 500 points.

slb2008

ASKER