ホーム » ブログ » jqueryで作成したプルダウンナビゲーションサンプル
このエントリーをはてなブックマークに追加
@2015/02/21
サイトのナビゲーションメニューのサンプルを作成しました。
結構クールなナビメニューと思うので、次のサイトに導入しようと考えています。
さぁ、DEMOと全ソースを共有します。

DEMO


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryでプルダウンメニューのサンプル@zanmai.net</title>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
body{font-size:12px;color:#555555;background:url(images/bg.jpg) no-repeat center top;}

.navbox{height:40px;position:relative;z-index:9; margin:auto;background:#554b4a;filter:alpha(opacity=90);-moz-opacity:0.90;opacity:0.90;font-family:'MS Pゴシック';}
.nav{width:1002px;margin:0 auto;height:40px; list-style:none;}
.nav li{float:left;height:40px;position:relative; list-style:none;}
.nav li.last{background:none;}
.nav li a{text-decoration:none;}
.nav li a span{float:left;display:block;line-height:40px;font-size:14px;color:#ffffff;cursor:pointer;width:143px;text-align:center; }
.menuHoverEffect{text-decoration:none; width:143px; background:url(images/menu_hover.jpg); height:40px;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:40px;left:-9px;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 0px #BEBEBE;}
.menuProBg{width:825px; height:235px; background:url(images/menu_pro_bg.png) no-repeat;}
.menuProMain{width:765px; margin:auto; padding-top:12px;}
.menuProLi{ float:left;}
.menuLiTxt{line-height:22px; font-size:12px; color:#696969;}
.menuLiTxt font{font-size:14px; color:#bb1721;}
.menuLiTxt a{color:#696969; text-decoration:none;}
.menuLiTxt a:hover{color:#696969; text-decoration:underline;}

.menuFrameBg{width:480px; height:185px; background:url(images/menu_news_bg.png) no-repeat;}
.menuBlock{width:440px; margin:auto; padding-top:12px;}
.menuItemLi{padding:0px 30px; margin-right:30px; height:150px; float:left; border-right:solid 1px #cccccc; }
.menuBlockImg{float:left; text-align:left; color:#bb1721; line-height:30px; font-size:14px;}
.menuItemLi2{padding:0px 30px; height:150px; float:right; border-left:solid 1px #cccccc; }
.menuBlockImg2{float:left; margin-left:30px; text-align:left; color:#bb1721; line-height:30px; font-size:14px;}
.menuItemLi3{padding:0px 25px; height:150px; float:right; border-left:solid 1px #cccccc; }
.menuBlockImg3{float:left; margin-left:10px; text-align:left; color:#bb1721; line-height:30px; font-size:14px;}
</style>
</head>
<body>
<div class="navbox">
  <div class="nav">
  
      <li class="dropMenu"><a href="/"><span>ホーム</span></a></li>
      
      <li class="dropMenu"> <a href="/blog"><span>ブログ</span></a>
        <div class="submenu">
          <div class="menuProBg">
            <div class="menuProMain">
              <div class="menuProLi">
                <div class="menuLiTxt">
                  <a href="#"><font>サブメニュー1</font></a><br />
                  <a href="#">サブメニュー2</a><br />
                  <a href="#">サブメニュー3</a><br />
                  <a href="#">サブメニュー</a>
                  <p><font>小見出し</font><br />
                  <a href="#">小見出し1</a><br />
                  <a href="#">小見出し2</a><br />
                  <a href="#">小見出し3</a></p>
                </div>
              </div>
              <div class="menuProLi" style="padding-left:48px;">
                <div class="menuLiTxt">
                  <a href="#"><font>小見出し2</font></a><br />
                  <a href="#">IT技術ForHTML</a><br />
                  <a href="#">IT技術ForHTML</a><br />
                  <a href="#">IT技術ForHTML</a><br />
                  <a href="#">IT技術ForHTML</a><br />
                  <a href="#">IT技術ForHTML</a>
                </div>
              </div>
              <div class="menuProLi" style="padding:0px 0px 0px 48px;">
                <div class="menuLiTxt">
				<a href="#"><font>小見出し3</font></a><br />
                  <a href="#">Link1</a><br />
                  <a href="#">Link1</a><br />
                  <a href="#">Link1</a><br />
                  <a href="#">Link1</a>
                  
                </div>
              </div>
              <div class="menuProLi" style="padding-left:48px;">
                <div class="menuLiTxt">
                  <a href="#"><font>小見出し4</font></a><br />
                  <a href="#">Link1</a><br />
                  <a href="#">Link1</a>
                  <p style="padding-top:66px;"><a href="#"><font>特別</font></a></p>
                </div>
              </div>
              <div class="menuProLi" style="padding-left:48px;">
                <div class="menuLiTxt">
                  <a href="#"><font>小見出し4</font></a><br />
                  <a href="#">Link1</a><br />
                  <a href="#">Link1</a>
                  <p style="padding-top:66px;"><a href="#"><font>特別</font></a></p>
                </div>
              </div>
              <div style="clear:both; height:0px; overflow:hidden;"></div>
            </div>
          </div>
        </div>
      </li>
      
      <li class="dropMenu"><a href="#"><span>情報センター</span></a>
        <div class="submenu">
          <div class="menuFrameBg">
            <div class="menuBlock">
              <div class="menuItemLi">
                <div class="menuLiTxt">
                  <a href="http://www.zanmai.net">会社ニュース</a><br />
                  <a href="http://web.matao.me">業界ニュース</a><br />
                  <a href="http://www.xiecheng.info">会社概要</a></div>
              </div>
              <div class="menuBlockImg"><img src="./images/news_menu_pic.jpg" /><br />
                <font>infomation center</font></div>
              <div style="clear:both; height:0px; overflow:hidden;"></div>
            </div>
          </div>
        </div>
      </li>
      
      <li class="dropMenu"> <a href="#"><span>メニューサンプル</span></a>
        <div class="submenu">
          <div class="menuFrameBg">
            <div class="menuBlock">
              <div class="menuItemLi">
                <div class="menuLiTxt">
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a></div>
              </div>
              <div class="menuBlockImg"><img src="./images/down_menu_pic.jpg" /><br />
                <font>メニュー</font></div>
              <div style="clear:both; height:0px; overflow:hidden;"></div>
            </div>
          </div>
        </div>
      </li>
      
      <li class="dropMenu"> <a href="#"><span>メニューサンプル</span></a>
        <div class="submenu">
          <div class="menuFrameBg">
            <div class="menuBlock">
              <div class="menuItemLi">
                <div class="menuLiTxt"><a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a></div>
              </div>
              <div class="menuBlockImg"><img src="./images/down_menu_pic.jpg" /><br />
                <font>メニュー</font></div>
              <div style="clear:both; height:0px; overflow:hidden;"></div>
            </div>
          </div>
        </div>
      </li>
      
      <li class="dropMenu"> <a href="#"><span>メニュー</span></a>
        <div class="submenu" style="left:-347px;">
          <div class="menuFrameBg">
            <div class="menuBlock">
              <div class="menuItemLi2">
                <div class="menuLiTxt"><a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a><br />
                  <a href="#">メニュー</a></div>
              </div>
              <div class="menuBlockImg2"><img src="./images/contact_menu_pic.jpg" /><br />
                <font>メニュー</font></div>
              <div style="clear:both; height:0px; overflow:hidden;"></div> 
            </div>
          </div>
        </div>
      </li>
      
      <li class="dropMenu"> <a href="#"><span>メニュー</span></a>
        <div class="submenu" style="left:-347px;">
          <div class="menuFrameBg">
            <div class="menuBlock">
              <div class="menuItemLi3">
                <div class="menuLiTxt"><a href="#">メニュー</a><br />
                  <a href="#">メニュー</a></div>
              </div>
              <div class="menuBlockImg3"><img src="./images/case_menu_pic.jpg" /><br />
                <font>home center</font></div>
              <div style="clear:both; height:0px; overflow:hidden;"></div>
            </div>
          </div>
        </div>
      </li>
      
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	zanmaidemo(".dropMenu");
});
function zanmaidemo(_this){
	$(_this).each(function(){
		var $this = $(this);
		var theMenu = $this.find(".submenu");
		var tarHeight = theMenu.height();
		theMenu.css({height:0});
		$this.hover(
			function(){
				$(this).addClass("menuHoverEffect");
				theMenu.stop().show().animate({height:tarHeight},400);
			},
			function(){
				$(this).removeClass("menuHoverEffect");
				theMenu.stop().animate({height:0},400,function(){
					$(this).css({display:"none"});
				});
			}
		);
	});
}
</script>

<div style="text-align:center;margin:480px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用ブラウザ:IE8以上、FireFox、Chrome、Safari、Opera. </p>
<p>作成者:<a href="http://www.zanmai.net/" target="_blank">生活三昧</a></p>
</div>
</body>
</html>

以上、メモを。



♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
3人
このエントリーをはてなブックマークに追加


◎zanmai.netサイト記事の転載・複製(コピー)は、zanmai.netへのリンクであることを明記してください!
◎本記事URL: http://www.zanmai.net/blog/data/233.html

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

アーカイブ @zanmai.net
check