Solved

CSS Mega Menus

Posted on 2010-08-30
13
946 Views
Last Modified: 2012-05-10
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>&nbsp;
   
   
     <!--Mega Menu Anchor-->
     <span id="megaanchor1" style="cursor: pointer; margin-left : 15px;  " >Location &nbsp;&nbsp;&nbsp;   </span>

<!--Mega Drop Down Menu HTML. -->
<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" /> <!--Break after 3rd column. Move this if desired-->

<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>


 <!--Mega Menu Anchor-->
<span id="megaanchor2" style="cursor: pointer; margin-left : 15px" >Teachers &nbsp;&nbsp;&nbsp;  </span>



<!--Mega Drop Down Menu HTML. -->
<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
0
Comment
Question by:slb2008
  • 7
  • 6
13 Comments
 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
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

0
 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
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

0
 

Author Comment

by:slb2008
Comment Utility
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
0
 

Author Comment

by:slb2008
Comment Utility
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.
0
 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
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
0
 

Author Comment

by:slb2008
Comment Utility
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.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:slb2008
Comment Utility

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
0
 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
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
0
 
LVL 18

Accepted Solution

by:
Rartemass earned 500 total points
Comment Utility
If I understand you correctly, you want to change the colour of the menu items Home, Location, and Teachers when highlighted to the same colour as the Account Policy etc.

To do this we will need to add a class to the top level menu and style that.

I have added the code to the html and css below.


test.css
test.html
0
 

Author Comment

by:slb2008
Comment Utility
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
0
 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
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.
0
 

Author Comment

by:slb2008
Comment Utility
Thanks for your time and help.  I got it.  You will get the 500 points.
0
 

Author Closing Comment

by:slb2008
Comment Utility
.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now