jquery - left right floating div according to width of parent div -

sorry if title confusing couldn't find appropriate title problem.but know trying achieve.

if dropdown of http://applearn.tv/ can see on mouseover dropdown changing it's direction ie if mouseover on first menu div displays right left , last menu displays left right.currently static concept of same thing using jquery.

sorry don't have jsfiddle this.

please let me know if there kind of tutorial or fiddle.

thank you.

you can find out position of dropdown box checking window width, dropdown box width & navigation item position left

you cantry logic, id left co-ordinate of current navigation comes in left half of window apply float:left else apply float:right

code:

    $('.navlink').click(shownavigation);      function shownavigation() {          var navigationitem = $(this);//assuming anchor tag         var holderitem = navigationitem.next('div.navigationitem');         var windowwidth = $(window).width();         var navigationleft = navigationitem.offset().left;          //find current position, if greater half of window width apply float:left else float:right         var currentposition = (windowwidth - navigationleft) + navigationitem.width();          //class float_left_class stands of float:left , class float_rght_class stands float:float_rght_class         var holderclass = (currentposition > windowwidth / 2) ? 'float_left_class' : 'float_rght_class';          //remove previosly added class , add new class         holderitem.removeclass('float_left_class float_rght_class').addclass(holderclass);          //then show holder item         holderitem.show();     } 

style:

.float_left_class{     float:left; }  .float_rght_class{     float:right; } .navigationitem{     display:none; } 

html:

<ul>     <li>         <a href="#" class="navlink">navigation 1 </a>         <div class="navigationitem">detail</div>     </li> </ul>