Меню по-корейски

В поисках нового подопытного кролика наткнулся на корейский сайт, и скажу, что это уже не кролик, а целый заяц.

Называется изделие Yuna Kim, его можно оценить, сходив по адресу www.iamyuna.com.

По чесноку, ничего нового в этих треугольниках нет, но поковыряться всё равно захотелось.

Для начала я сохранил страничку на рабочий стол. При копировании увидел, что всё добро весит 15 метров за счёт видеороликов.

И чем бы здесь поживиться? С треугольниками неинтересно, а вот javascript меню всё-таки любопытно.

Опустим неинтересные подробности в виде вытаскивания и посмотрим переработанный код для блоггера.

Для начала глядим готовое демо (там нижний виджет под названием yuna).

Все пункты меню, для упрощения корректировки, подписаны, не разберётся только ленивый, главное - понять логику меню. Весь код можно спровадить в html виджет, либо унести скрипты и стили в /head, а дивы в виджет, либо всё меню засунуть в шаблон по тому же принципу.

Состав кода (заранее согласен, что громоздко):

<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/yuna/jquery-1.js"></script>
<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/yuna/jquery-ui-1.js"></script>

<script src='http://planeta.omg-linux.ru/docs/yuna/jquery_002.js' type='text/javascript'/></script>

Скрипты расположены на моём хостинге, качайте и кладите на свой.
Скрипт jquery-1 представляет собой переименованную jQuery JavaScript Library v1.5.1. Остальные два - дополнения.

Скрипт меню:

<script type="text/javascript">

$(document).ready(function() {
 
 $('header').hide().fadeIn(500);
 $( "#hello_hide1, #hello_hide2, #submenu_all, #submenu_digital, #submenu_branding, #submenu_print,#work").hide();

 
 $('div[id^=mywork]').each(function(index) {
  $('#mywork'+ (index+1)).hide();
 });
 
 
 
 /* thumbnail */
 shapes = $('.thumbnail_wrapper');  
 $('.thumbnail_wrapper, nav').show();
 $('.thumbnail_wrapper').animate({top:'-20px', opacity:0});
 var z = 0;  
 var refreshId = setInterval(function() {  
     
     shapes.eq(z).animate({top:'15px', opacity:100},{duration:1000, easing: 'easeOutBounce'});
      
      z++;  
      if (z > shapes.length) {  
         clearInterval(refreshId);  
      }  
 }, 200);
 
 
 /* menu */
 $("#submenu_all,#submenu_digital,#submenu_branding,#submenu_print,#hello_hide1, #hello_hide2").mouseover(function(e)
     {
     $(this).addClass("over");
     });
 
 $("#submenu_all,#submenu_digital,#submenu_branding,#submenu_print,#hello_hide1, #hello_hide2").mouseout(function(e)
     {
     $(this).removeClass("over");
     });




  /* hello */
 
  $("#hello").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#hello_hide1").slideDown({duration:300 , easing: 'easeOutCirc'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#hello_hide1");
   });
  }); 
  
  $("#contact,#tweets").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#hello_hide2").slideDown({duration:300 , easing: 'easeOutCirc'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#hello_hide2");
   });
  }); 
 
 
 
 
 
  /* icons rollover */
  $("#sort_all,#submenu_all").mouseover(function() {
   if (!$("#allRollover").hasClass ('selected')) {
    $("#sort_all,#submenu_all").hover(function() {
      $("#allRollover").addClass("over");
    },function() {
       $("#allRollover").removeClass("over");
     });
   }
  });
  
  $("#sort_digital,#submenu_digital").mouseover(function() {
   if (!$("#digitalRollover").hasClass ('selected')) {
    $("#sort_digital,#submenu_digital").hover(function() {
      $("#digitalRollover").addClass("over");
    },function() {
       $("#digitalRollover").removeClass("over");
       
      
     });
   }
  });
  $("#sort_branding,#submenu_branding").mouseover(function() {
   if (!$("#brandingRollover").hasClass ('selected')) {
    $("#sort_branding,#submenu_branding").hover(function() {
      $("#brandingRollover").addClass("over");
    },function() {
       $("#brandingRollover").removeClass("over");

     });
   }
  });
  $("#sort_print,#submenu_print").mouseover(function() {
   if (!$("#printRollover").hasClass ('selected')) {
    $("#sort_print,#submenu_print").hover(function() {
      $("#printRollover").addClass("over");
    },function() {
       $("#printRollover").removeClass("over");
       
      
     });
   }
  });
  
  
  /* submenu rollover */
 
  $("#sort_all").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_all").slideDown({duration:300 , easing: 'easeInOutCubic'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_all");
   });
  });
  
  $("#sort_digital").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_digital").slideDown({duration:300 , easing: 'easeInOutCubic'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_digital");
   });
  });
  $("#sort_branding").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_branding").slideDown({duration:300 , easing: 'easeInOutCubic'});
   }); 
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_branding");
   });
  });
  $("#sort_print").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_print").slideDown({duration:300 , easing: 'easeInOutCubic'});
   }); 
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_print");
   });
  }); /* submenu ends */
  
  
  /* rollover icons ends */
  
  /* thumbnails hover action */
  $(".thumbnail_wrapper").hover(function(){
   $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:300,easing: 'easeOutBack'});
   $(this).animate({top:'3px'},{duration:300 , easing: 'easeInQuad'});
  }, function() {
   $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
   $(this).animate({top:'15px'},{duration:300, easing: 'easeOutBounce'});
   
  }); /* end thumbnails hover action */
  
  
  /* ends */
  $('div[id^=slideImg]').each(function(index) {
  
   $('#slideImg'+ (index+1)).cycle({
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '.next,#slideImg'+ (index+1),
    prev:   '.prev'
   });
  });
 
});
 
function myMouseOut(id){
      if ($(id).hasClass("over")){
       $(id).mouseleave(function(){
        $(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
       });
      } else{
       $(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
      }
} 
 
 /* scroll */

function goToByScroll(id){
 if( $.browser.opera ){
  $('html').animate({scrollTop: $("#"+id).offset().top},'slow');

 }else {
   $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); 
  }
}

/* show work */
 function showWork(id1,id2){
  /* rollover icons */
  $("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
  $("#"+id2).addClass('selected');
  
  /* loading animation */

  if( $.browser.opera ){
    $('html').animate({scrollTop: $("#nav").offset().top},'slow');
   }else {
     $('html,body').animate({scrollTop: $("#nav").offset().top},'slow'); 
  }
    
  $("#divider:first").hide();
  $("#work_loading2").css('width','0%').show();
  $(".menu_"+id1).css('color','#ff4d4d'); /* highlight color - submenu selected */
  
  $("#work_loading").animate({height:'5px'},{queue:false,duration:300, easing: 'easeInOutQuad'});
  
  /* close work */
  
  $('div[id^=mywork]').each(function(index) {
   if( $('#mywork'+ (index+1)).is(":visible") ) {
       $('#mywork'+ (index+1)).fadeOut().hide();
       $("#work").slideUp({duration:200 , easing: 'easeInOutCubic'});
       $(".menu_mywork"+(index+1)).css('color','#333');
   }
  });/* end close work */
  
  $("#work_loading1").animate({height:'5px'},300, function() {
   $("#work_loading2").animate({width:'100%'},1000, function(){
    $("#"+id1).show();
    $("#work").slideDown({duration:700 , easing: 'easeInOutQuad'});
    $("#work_loading1").height(0);
   }); /* end working_loading2 */
  }); /* end working_loading1 */

    
}/* end show work */

function closeWork(id){
  $('html,body').animate({scrollTop: $("#top").offset().top},'slow', function() {
  $("#work").slideUp(500,function(){
   /* rollover icons */
   $("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
   $("#allRollover").addClass('selected');
   
   /* close animation */
   $("#"+id).hide();
   $("#work_loading2").slideUp({duration:200 , easing: 'easeInOutQuad'});
   $("#work_loading").animate({height:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
   $("#divider:first").show();
   $(".menu_"+id).css('color','#333'); /* remove color - submenu selected */
  });
 });
}


</script>

Стили:

<style>

#sort_all {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0px 30px 0 15px;
 float: left;
}
#sort_digital {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0 30px 0 0;
 float: left;
}
#sort_branding {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0px 30px 0 0;
 float: left;
}
#sort_print {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0;
 float: left;
}

.icon_desc {
 margin-bottom: 15px;
 margin-top: 5px;
 font-size: 12px;
 color: #959595;
}
#sort_digital img{
 position: relative;
 bottom: +1px;
}
#sort_branding img{
 position: relative;
 bottom: +1px;
}

/** rollover icons **/
#allRollover {
 display: block;
 width: 40px;
 height: 12px;
 #background: url(../img/allRolloverImage.gif) no-repeat 0 0;
 overflow: hidden;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

.over#allRollover{
 background-position: 0 -24px;
}
.selected#allRollover{
 background-position: 0 -12px;
}

.active#allRollover {
 background-position: 0 -24px;
}

#nav{
 position: relative;
 top: -20px;
}

#mywork3 .next,#mywork3 .prev{
 visibility: hidden;
}
#mywork4 .next,#mywork4 .prev{
 visibility: hidden;
}
#mywork14 .next,#mywork14 .prev{
 visibility: hidden;
}
#mywork16 .next,#mywork16 .prev{
 visibility: hidden;
}

#submenu_all{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_all .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 3px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}
#submenu_digital{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_digital .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0 0;
 float: left;
}
#submenu_digital .col2 {
 width:209px;
 border-top: 3px solid #555555;
 margin: 0 30px 0 0;
 float: left;
 padding: 17px 0;
}
#submenu_digital .col3 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0 30px 0 0;
 padding: 17px 0;
 float: left;
}
#submenu_digital .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}

#submenu_branding{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_branding .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_branding .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0 0;
 float: left;
}
#submenu_branding .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 3px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_branding .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}

#submenu_print{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_print .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col4 {
 width:210px;
 border-top: 3px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}


</style>

И основная часть, в которой нужно проставить/исправить ссылки (и удалить пробелы, если берёте отсюда):

<a name="nav" id="nav"></a>

<nav style="display: block;"> <!-- nav -->
<div id="sort_all">
<div id="allRollover" class="selected">
all</div>
<div class="icon_desc">
Всё</div>
</div>

<div id="sort_digital">
<div class="" id="digitalRollover">
Пункт1</div>
<div class="icon_desc">
Описание1</div>
</div>

<div id="sort_branding">
<div class="" id="brandingRollover">
Пункт2</div>
<div class="icon_desc">
Описание2</div>
</div>
<div id="sort_print">

<div class="" id="printRollover">
Пункт3</div>
<div class="icon_desc">
Описание3</div>
</div>

<div style="display: none;" id="submenu_all">
<div class="col1">
<a href="#" class="menu_mywork1" onclick="showWork('mywork1', 'digitalRollover'); return false;">Ссылка_пункта_всё
</a>
<a href="#" class="menu_mywork5" onclick="showWork('mywork5', 'printRollover'); return false;">Ссылка_пункта_всё
</a>

<a href="#" class="menu_mywork9" onclick="showWork('mywork9', 'brandingRollover'); return false;">Ссылка_пункта_всё
</a>
<a href="#" class="menu_mywork13" onclick="showWork('mywork13', 'printRollover'); return false;">Ссылка_пункта_всё
</a>

</div>
<div class="col2">
<a href="#" class="menu_mywork2" onclick="showWork('mywork2', 'brandingRollover'); return false;">Ссылка_пункта_всё1
</a>
<a href="#" class="menu_mywork6" onclick="showWork('mywork6', 'digitalRollover'); return false;">Ссылка_пункта_всё1
</a>

<a href="#" class="menu_mywork10" onclick="showWork('mywork10', 'printRollover'); return false;">Ссылка_пункта_всё1
</a>
<a href="#" class="menu_mywork14" onclick="showWork('mywork14', 'digitalRollover'); return false;">Ссылка_пункта_всё1
</a>


</div>
<div class="col3">
<a href="#" class="menu_mywork3" onclick="showWork('mywork3', 'digitalRollover'); return false;">Ссылка_пункта_всё2
</a>
<a href="#" class="menu_mywork7" onclick="showWork('mywork7', 'brandingRollover'); return false;">Ссылка_пункта_всё2
</a>
<a href="#" class="menu_mywork11" onclick="showWork('mywork11', 'digitalRollover'); return false;">Ссылка_пункта_всё2
</a>

<a href="#" class="menu_mywork15" onclick="showWork('mywork15', 'printRollover'); return false;">Ссылка_пункта_всё2
</a>
</div>
<div class="col4">
<a href="#" class="menu_mywork4" onclick="showWork('mywork4', 'printRollover'); return false;">Ссылка_пункта_всё3
</a>
<a href="#" class="menu_mywork8" onclick="showWork('mywork8', 'digitalRollover'); return false;">Ссылка_пункта_всё3
</a>
<a href="#" class="menu_mywork12" onclick="showWork('mywork12', 'printRollover'); return false;">Ссылка_пункта_всё3
</a>



</div>
</div>
<div style="display: none;" id="submenu_digital">
<div class="col1">

</div>
<div class="col2">
<a href="#" class="menu_mywork1" onclick="showWork('mywork1', 'digitalRollover'); return false;">Ссылка_пункта1</a>

<a href="#" class="menu_mywork6" onclick="showWork('mywork6', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork11" onclick="showWork('mywork11', 'digitalRollover'); return false;">Ссылка_пункта1
</a>

<a href="#" class="menu_mywork8" onclick="showWork('mywork8', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork3" onclick="showWork('mywork3', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork14" onclick="showWork('mywork14', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
</div>
<div class="col3">


</div>

<div class="col4">

</div>
</div>
<div style="display: none;" id="submenu_branding">
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">
<a href="#" class="menu_mywork2" onclick="showWork('mywork2', 'brandingRollover'); return false;">Ссылка_пункта2
</a>
<a href="#" class="menu_mywork7" onclick="showWork('mywork7', 'brandingRollover'); return false;">Ссылка_пункта2
</a>

<a href="#" class="menu_mywork9" onclick="showWork('mywork9', 'brandingRollover'); return false;">Ссылка_пункта2
</a>
</div>
<div class="col4">
</div>
</div>
<div class="" style="display: none;" id="submenu_print">
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">





</div>
<div class="col4">
<a href="#" class="menu_mywork15" onclick="showWork('mywork15', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork4" onclick="showWork('mywork4', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork13" onclick="showWork('mywork13', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork5" onclick="showWork('mywork5', 'printRollover'); return false;">Ссылка_пункта3
</a>

<a href="#" class="menu_mywork12" onclick="showWork('mywork12', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork10" onclick="showWork('mywork10', 'printRollover'); return false;">Ссылка_пункта3
</a>
</div>
</div>

</nav>

Весь код целиком

<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/yuna/jquery-1.js"></script>
<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/yuna/jquery-ui-1.js"></script>

<script src='http://planeta.omg-linux.ru/docs/yuna/jquery_002.js' type='text/javascript'/></script>

<style>
#sort_all {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0px 30px 0 15px;
 float: left;
}
#sort_digital {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0 30px 0 0;
 float: left;
}
#sort_branding {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0px 30px 0 0;
 float: left;
}
#sort_print {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0;
 float: left;
}

.icon_desc {
 margin-bottom: 15px;
 margin-top: 5px;
 font-size: 12px;
 color: #959595;
}
#sort_digital img{
 position: relative;
 bottom: +1px;
}
#sort_branding img{
 position: relative;
 bottom: +1px;
}

/** rollover icons **/
#allRollover {
 display: block;
 width: 40px;
 height: 12px;
 background: url(../img/allRolloverImage.gif) no-repeat 0 0;
 overflow: hidden;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

.over#allRollover{
 background-position: 0 -24px;
}
.selected#allRollover{
 background-position: 0 -12px;
}

.active#allRollover {
 background-position: 0 -24px;
}

#nav{
 position: relative;
 top: -20px;
}

#mywork3 .next,#mywork3 .prev{
 visibility: hidden;
}
#mywork4 .next,#mywork4 .prev{
 visibility: hidden;
}
#mywork14 .next,#mywork14 .prev{
 visibility: hidden;
}
#mywork16 .next,#mywork16 .prev{
 visibility: hidden;
}

#submenu_all{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_all .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 3px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}
#submenu_digital{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_digital .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0 0;
 float: left;
}
#submenu_digital .col2 {
 width:209px;
 border-top: 3px solid #555555;
 margin: 0 30px 0 0;
 float: left;
 padding: 17px 0;
}
#submenu_digital .col3 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0 30px 0 0;
 padding: 17px 0;
 float: left;
}
#submenu_digital .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}

#submenu_branding{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_branding .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_branding .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0 0;
 float: left;
}
#submenu_branding .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 3px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_branding .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}

#submenu_print{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_print .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col4 {
 width:210px;
 border-top: 3px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}
</style>

<script type="text/javascript">

$(document).ready(function() {
 
 $('header').hide().fadeIn(500);
 $( "#hello_hide1, #hello_hide2, #submenu_all, #submenu_digital, #submenu_branding, #submenu_print,#work").hide();

 
 $('div[id^=mywork]').each(function(index) {
  $('#mywork'+ (index+1)).hide();
 });
 
 
 
 /* thumbnail */
 shapes = $('.thumbnail_wrapper');  
 $('.thumbnail_wrapper, nav').show();
 $('.thumbnail_wrapper').animate({top:'-20px', opacity:0});
 var z = 0;  
 var refreshId = setInterval(function() {  
     
     shapes.eq(z).animate({top:'15px', opacity:100},{duration:1000, easing: 'easeOutBounce'});
      
      z++;  
      if (z > shapes.length) {  
         clearInterval(refreshId);  
      }  
 }, 200);
 
 
 /* menu */
 $("#submenu_all,#submenu_digital,#submenu_branding,#submenu_print,#hello_hide1, #hello_hide2").mouseover(function(e)
     {
     $(this).addClass("over");
     });
 
 $("#submenu_all,#submenu_digital,#submenu_branding,#submenu_print,#hello_hide1, #hello_hide2").mouseout(function(e)
     {
     $(this).removeClass("over");
     });




  /* hello */
 
  $("#hello").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#hello_hide1").slideDown({duration:300 , easing: 'easeOutCirc'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#hello_hide1");
   });
  }); 
  
  $("#contact,#tweets").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#hello_hide2").slideDown({duration:300 , easing: 'easeOutCirc'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#hello_hide2");
   });
  }); 
 
 
 
 
 
  /* icons rollover */
  $("#sort_all,#submenu_all").mouseover(function() {
   if (!$("#allRollover").hasClass ('selected')) {
    $("#sort_all,#submenu_all").hover(function() {
      $("#allRollover").addClass("over");
    },function() {
       $("#allRollover").removeClass("over");
     });
   }
  });
  
  $("#sort_digital,#submenu_digital").mouseover(function() {
   if (!$("#digitalRollover").hasClass ('selected')) {
    $("#sort_digital,#submenu_digital").hover(function() {
      $("#digitalRollover").addClass("over");
    },function() {
       $("#digitalRollover").removeClass("over");
       
      
     });
   }
  });
  $("#sort_branding,#submenu_branding").mouseover(function() {
   if (!$("#brandingRollover").hasClass ('selected')) {
    $("#sort_branding,#submenu_branding").hover(function() {
      $("#brandingRollover").addClass("over");
    },function() {
       $("#brandingRollover").removeClass("over");

     });
   }
  });
  $("#sort_print,#submenu_print").mouseover(function() {
   if (!$("#printRollover").hasClass ('selected')) {
    $("#sort_print,#submenu_print").hover(function() {
      $("#printRollover").addClass("over");
    },function() {
       $("#printRollover").removeClass("over");
       
      
     });
   }
  });
  
  
  /* submenu rollover */
 
  $("#sort_all").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_all").slideDown({duration:300 , easing: 'easeInOutCubic'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_all");
   });
  });
  
  $("#sort_digital").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_digital").slideDown({duration:300 , easing: 'easeInOutCubic'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_digital");
   });
  });
  $("#sort_branding").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_branding").slideDown({duration:300 , easing: 'easeInOutCubic'});
   }); 
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_branding");
   });
  });
  $("#sort_print").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_print").slideDown({duration:300 , easing: 'easeInOutCubic'});
   }); 
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_print");
   });
  }); /* submenu ends */
  
  
  /* rollover icons ends */
  
  /* thumbnails hover action */
  $(".thumbnail_wrapper").hover(function(){
   $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:300,easing: 'easeOutBack'});
   $(this).animate({top:'3px'},{duration:300 , easing: 'easeInQuad'});
  }, function() {
   $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
   $(this).animate({top:'15px'},{duration:300, easing: 'easeOutBounce'});
   
  }); /* end thumbnails hover action */
  
  
  /* ends */
  $('div[id^=slideImg]').each(function(index) {
  
   $('#slideImg'+ (index+1)).cycle({
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '.next,#slideImg'+ (index+1),
    prev:   '.prev'
   });
  });
 
});
 
function myMouseOut(id){
      if ($(id).hasClass("over")){
       $(id).mouseleave(function(){
        $(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
       });
      } else{
       $(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
      }
} 
 
 /* scroll */

function goToByScroll(id){
 if( $.browser.opera ){
  $('html').animate({scrollTop: $("#"+id).offset().top},'slow');

 }else {
   $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); 
  }
}

/* show work */
 function showWork(id1,id2){
  /* rollover icons */
  $("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
  $("#"+id2).addClass('selected');
  
  /* loading animation */

  if( $.browser.opera ){
    $('html').animate({scrollTop: $("#nav").offset().top},'slow');
   }else {
     $('html,body').animate({scrollTop: $("#nav").offset().top},'slow'); 
  }
    
  $("#divider:first").hide();
  $("#work_loading2").css('width','0%').show();
  $(".menu_"+id1).css('color','#ff4d4d'); /* highlight color - submenu selected */
  
  $("#work_loading").animate({height:'5px'},{queue:false,duration:300, easing: 'easeInOutQuad'});
  
  /* close work */
  
  $('div[id^=mywork]').each(function(index) {
   if( $('#mywork'+ (index+1)).is(":visible") ) {
       $('#mywork'+ (index+1)).fadeOut().hide();
       $("#work").slideUp({duration:200 , easing: 'easeInOutCubic'});
       $(".menu_mywork"+(index+1)).css('color','#333');
   }
  });/* end close work */
  
  $("#work_loading1").animate({height:'5px'},300, function() {
   $("#work_loading2").animate({width:'100%'},1000, function(){
    $("#"+id1).show();
    $("#work").slideDown({duration:700 , easing: 'easeInOutQuad'});
    $("#work_loading1").height(0);
   }); /* end working_loading2 */
  }); /* end working_loading1 */

    
}/* end show work */

function closeWork(id){
  $('html,body').animate({scrollTop: $("#top").offset().top},'slow', function() {
  $("#work").slideUp(500,function(){
   /* rollover icons */
   $("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
   $("#allRollover").addClass('selected');
   
   /* close animation */
   $("#"+id).hide();
   $("#work_loading2").slideUp({duration:200 , easing: 'easeInOutQuad'});
   $("#work_loading").animate({height:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
   $("#divider:first").show();
   $(".menu_"+id).css('color','#333'); /* remove color - submenu selected */
  });
 });
}


</script>

<a name="nav" id="nav"></a>

<nav style="display: block;"> <!-- nav -->
<div id="sort_all">
<div id="allRollover" class="selected">
all</div>
<div class="icon_desc">
Всё</div>
</div>

<div id="sort_digital">
<div class="" id="digitalRollover">
Пункт1</div>
<div class="icon_desc">
Описание1</div>
</div>

<div id="sort_branding">
<div class="" id="brandingRollover">
Пункт2</div>
<div class="icon_desc">
Описание2</div>
</div>
<div id="sort_print">

<div class="" id="printRollover">
Пункт3</div>
<div class="icon_desc">
Описание3</div>
</div>

<div style="display: none;" id="submenu_all">
<div class="col1">
<a href="#" class="menu_mywork1" onclick="showWork('mywork1', 'digitalRollover'); return false;">Ссылка_пункта_всё
</a>
<a href="#" class="menu_mywork5" onclick="showWork('mywork5', 'printRollover'); return false;">Ссылка_пункта_всё
</a>

<a href="#" class="menu_mywork9" onclick="showWork('mywork9', 'brandingRollover'); return false;">Ссылка_пункта_всё
</a>
<a href="#" class="menu_mywork13" onclick="showWork('mywork13', 'printRollover'); return false;">Ссылка_пункта_всё
</a>

</div>
<div class="col2">
<a href="#" class="menu_mywork2" onclick="showWork('mywork2', 'brandingRollover'); return false;">Ссылка_пункта_всё1
</a>
<a href="#" class="menu_mywork6" onclick="showWork('mywork6', 'digitalRollover'); return false;">Ссылка_пункта_всё1
</a>

<a href="#" class="menu_mywork10" onclick="showWork('mywork10', 'printRollover'); return false;">Ссылка_пункта_всё1
</a>
<a href="#" class="menu_mywork14" onclick="showWork('mywork14', 'digitalRollover'); return false;">Ссылка_пункта_всё1
</a>


</div>
<div class="col3">
<a href="#" class="menu_mywork3" onclick="showWork('mywork3', 'digitalRollover'); return false;">Ссылка_пункта_всё2
</a>
<a href="#" class="menu_mywork7" onclick="showWork('mywork7', 'brandingRollover'); return false;">Ссылка_пункта_всё2
</a>
<a href="#" class="menu_mywork11" onclick="showWork('mywork11', 'digitalRollover'); return false;">Ссылка_пункта_всё2
</a>

<a href="#" class="menu_mywork15" onclick="showWork('mywork15', 'printRollover'); return false;">Ссылка_пункта_всё2
</a>
</div>
<div class="col4">
<a href="#" class="menu_mywork4" onclick="showWork('mywork4', 'printRollover'); return false;">Ссылка_пункта_всё3
</a>
<a href="#" class="menu_mywork8" onclick="showWork('mywork8', 'digitalRollover'); return false;">Ссылка_пункта_всё3
</a>
<a href="#" class="menu_mywork12" onclick="showWork('mywork12', 'printRollover'); return false;">Ссылка_пункта_всё3
</a>

</div>
</div>
<div style="display: none;" id="submenu_digital">
<div class="col1">

</div>
<div class="col2">
<a href="#" class="menu_mywork1" onclick="showWork('mywork1', 'digitalRollover'); return false;">Ссылка_пункта1</a>

<a href="#" class="menu_mywork6" onclick="showWork('mywork6', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork11" onclick="showWork('mywork11', 'digitalRollover'); return false;">Ссылка_пункта1
</a>

<a href="#" class="menu_mywork8" onclick="showWork('mywork8', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork3" onclick="showWork('mywork3', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork14" onclick="showWork('mywork14', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
</div>
<div class="col3">
</div>

<div class="col4">
</div>
</div>
<div style="display: none;" id="submenu_branding">
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">
<a href="#" class="menu_mywork2" onclick="showWork('mywork2', 'brandingRollover'); return false;">Ссылка_пункта2
</a>
<a href="#" class="menu_mywork7" onclick="showWork('mywork7', 'brandingRollover'); return false;">Ссылка_пункта2
</a>

<a href="#" class="menu_mywork9" onclick="showWork('mywork9', 'brandingRollover'); return false;">Ссылка_пункта2
</a>
</div>
<div class="col4">
</div>
</div>
<div class="" style="display: none;" id="submenu_print">
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">

</div>
<div class="col4">
<a href="#" class="menu_mywork15" onclick="showWork('mywork15', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork4" onclick="showWork('mywork4', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork13" onclick="showWork('mywork13', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork5" onclick="showWork('mywork5', 'printRollover'); return false;">Ссылка_пункта3
</a>

<a href="#" class="menu_mywork12" onclick="showWork('mywork12', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork10" onclick="showWork('mywork10', 'printRollover'); return false;">Ссылка_пункта3
</a>
</div>
</div>

</nav>

Код исправлен ради приемлемого юзабилити, больше не трогал. Заусенцы шлифуем сами :).