2013.08.18
css

jQueryとCSS3でインパクトのあるスタイリッシュで素敵なメニュー

jQueryとCSS3で一味違うメニューが作れます。
今回紹介するメニューは、ボタンをクリックすると画像がポップアップし、文字が下にスライドしながら下に別のボタンが現れます。
サブメニューがある場合は下にスライド後、横にスライドする仕様です。

ため息がでるほどスタイリッシュな動きです。無駄に遊んでしまいます。
こちらで公開されているソースを、どんな作りになっているのか調べがてらカスタマイズしてみました。

jquery012

jQueryとCSS3でできるスタイリッシュなメニュー

1.headにjqueryを読み込む

今回はjquery本体と、easingのプラグインを使います。
easingのプラグインはこちらからダウンロード。
HTMLのhead内に以下を記述。

HTMLソース

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

2.HTML

jqueryとCSSで装飾するのでHTMLのソースは特に難しいことはしていません。

HTMLソース

<ul id="sdt_menu" class="sdt_menu">
 <li>
   <a href="#">
     <img src="http://ri-mode.com/rainbow/files/pic1.jpg" alt=""/>
     <span class="sdt_active"></span>
     <span class="sdt_wrap">
        <span class="sdt_link">About me</span>
        <span class="sdt_descr">Get to know me</span>
     </span>
   </a>
 </li>
 <li>
   <a href="#">
     <img src="http://ri-mode.com/rainbow/files/pic2.jpg" alt=""/>
     <span class="sdt_active"></span>
     <span class="sdt_wrap">
        <span class="sdt_link">Portfolio</span>
        <span class="sdt_descr">My work</span>
     </span>
   </a>
   <div class="sdt_box">
      <a href="#">Websites</a>
      <a href="#">Illustrations</a>
      <a href="#">Photography</a>
   </div>
 </li>
 <li>
   <a href="#">
     <img src="http://ri-mode.com/rainbow/files/pic3.jpg" alt=""/>
     <span class="sdt_active"></span>
     <span class="sdt_wrap">
        <span class="sdt_link">Inspiration</span>
        <span class="sdt_descr">Where ideas get <br/>born</span>
     </span>
   </a>
 </li>
 <li>
   <a href="#">
     <img src="http://ri-mode.com/rainbow/files/pic4.jpg" alt=""/>
     <span class="sdt_active"></span>
     <span class="sdt_wrap">
        <span class="sdt_link">Photos</span>
        <span class="sdt_descr">I like to <br/>photograph</span>
     </span>
   </a>
 </li>
 <li>
   <a href="#">
     <img src="http://ri-mode.com/rainbow/files/pic5.jpg" alt=""/>
     <span class="sdt_active"></span>
     <span class="sdt_wrap">
        <span class="sdt_link">Blog</span>
        <span class="sdt_descr">I write about <br/>design</span>
     </span>
   </a>
 </li>
 <li>
   <a href="#">
     <img src="http://ri-mode.com/rainbow/files/pic6.jpg" alt=""/>
     <span class="sdt_active"></span>
     <span class="sdt_wrap">
        <span class="sdt_link">Projects</span>
        <span class="sdt_descr">I like to code</span>
     </span>
   </a>
   <div class="sdt_box">
      <a href="#">Job Board Website</a>
      <a href="#">Shopping Cart</a>
      <a href="#">Interactive Maps</a>
   </div>
 </li>
</ul>

3.CSS

CSS3のborder-radiusで円形を作っています。

CSSソース

ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:780px;
height:300px;
margin:10px auto 10px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:130px;
height:130px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:130px;
height:130px;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
z-index:0;
background:#20b2aa no-repeat bottom right;
-moz-box-shadow:0px 0px 1px #fff inset, 0px 0px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0px 0px 1px #fff inset, 0px 0px 1px rgba(0, 0, 0, 0.5);
box-shadow:0px 0px 1px #fff inset, 0px 0px 1px rgba(0, 0, 0, 0.5);
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
right:50px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:130px;
height:130px;
z-index:15;	
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#f4c41e;
top:130px;
width:130px;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 1px #fff inset, 0px 0px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0px 0px 1px #fff inset, 0px 0px 1px rgba(0, 0, 0, 0.5);
box-shadow:0px 0px 1px #fff inset, 0px 0px 1px rgba(0, 0, 0, 0.5);
}
ul.sdt_menu li span span.sdt_link, ul.sdt_menu li span span.sdt_descr, ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.6);
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:18px;
float:left;
clear:both;
margin-top:20px;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
font-size:12px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
height:170px;
overflow:hidden;
border-radius: 90px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
top:129px;
left:0px;
display:none;
background:#f09199;
-moz-box-shadow:0px 0px 1px #fff inset, 0px 0px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0px 0px 1px #fff inset, 0px 0px 1px rgba(0, 0, 0, 0.5);
box-shadow:0px 0px 1px #fff inset, 0px 0px 1px rgba(0, 0, 0, 0.5);	
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:20px;
color:#0B75AF;
font-size:14px;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:45px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}

4.jQuery

bodyタグのすぐ下、もしくはbodyタグが終わる直前に以下のソースを記述。

jQueryソース

<script type="text/javascript">
$(function() {
   $('#sdt_menu > li').bind('mouseenter',function(){
      var $elem = $(this);
      $elem.find('img')
      .stop(true)
      .animate({
         'width':'130px',
         'height':'130px',
         'left':'0px'
      },400,'easeOutBack')
      .andSelf()
      .find('.sdt_wrap')
      .stop(true)
      .animate({'top':'150px'},500,'easeOutBack')
      .andSelf()
      .find('.sdt_active')
      .stop(true)
      .animate({
         'height':'130px',
         'width':'130px',
         'left':'0px'
         },200,function(){
         var $sub_menu = $elem.find('.sdt_box');
         if($sub_menu.length){
            var left = '129px';
            if($elem.parent().children().length == $elem.index()+1)
            left = '-169px';
            $sub_menu.show().animate({'left':left},200);
         }
      });
   }).bind('mouseleave',function(){
     var $elem = $(this);
     var $sub_menu = $elem.find('.sdt_box');
     if($sub_menu.length)
     $sub_menu.hide().css('left','0px');
     $elem.find('.sdt_active')
     .stop(true)
     .animate({
        'height':'0px',
         'width':'0px',
         'left':'65px'
     },200)
     .andSelf().find('img')
     .stop(true)
     .animate({
        'width':'0px',
        'height':'0px',
        'left':'65px'},400)
     .andSelf()
     .find('.sdt_wrap')
     .stop(true)
     .animate({'top':'25px'},500);
   });
});
</script>

CSSもjQueryもソースが長いのですが、一つ一つ照らし合わせてどう動いているのか確認してみると、ソースは意外にも簡単です。
jqueryとCSS3は本当にアイディア次第でいろんなことができますね。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP