How to make cross frame menus using jquery
Here is simple & easy tutorial of making cross frame menus by using jquery. In this example, i've used 2 frames.

i. top_frame (top_frame.html)
ii. bottom_frame (bottom_frame.html)



In 'top_frame' i've made a parent menu as 'Home'. All, sub-menus of parent menu(Home) are in 'bottom_frame'. So, now when user will click on 'Home' link all sub-menus should be shown. But, as both the content are in 2 different frames it not that simple to do that.

But, by using javascript we can make communication between 2 frames of same origin & this technique uses this method to design this 'cross frame menus'.

So, what i've done i've hide the sub-menus list by default using CSS display:none; property.

EX:

<ul class="glossymenu">
<
li><class="l1" href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<
li><class="l2" href="http://www.dynamicdrive.com/style/">CSS Examples</a></li>
<
li><class="l3" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<
li><class="l4" href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<
li><class="l5" href="http://www.cssdrive.com">CSS Drive</a></li>
<
li><class="l6" href="http://www.codingforums.com/">Coding Forums</a></li>  
</
ul



Now, in top frame when there is click happen on 'Home' link i show the sub-menus by changing display:none; to display:block; by using Jquery. Here the sample code for that.

EX:


$(document).ready(function(){
 $(
'.glossymenu').click(function(){
  $(
parent.bottom_frame.document).contents().find('.glossymenu').toggle();
 });
 
 $(
document).click(function(event){
        if( $(
event.target).hasClass("home") )
        { return; }
          
        $(
parent.bottom_frame.document).contents().find('.glossymenu').hide();
    });
}); 




One more thing which i've done in the above jquery code is that, if any click happen except the 'Home' link in top frame the sub-menu list get hide again. So that, it actually behave like a dropdown menus.


You can download the full code from here : https://www.box.com/s/prp8q3p5qu1o26r0ym5e

Hope it'll be useful.

24th Dec 2012 at 9:46 PM   4507 Views

Oop's, No Comments has been droped for this thread yet now.
Why don't you drop one.