top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1316

お名前.com でWordpress:さぁて楽しや、テーマ選び。ブログとして利用するわけでは無いんだなぁ。そんでもって、jQueryも少し ・・・ 【お名前.com】

 2010-04-12
 ・お名前.com お名前.com共有サーバーで始めた、サイト創り。

 今回は、
 ・ブログ用に構築するわけでは無い。
 ・ポータルサイト として構築する。
 □テーマ決めて・・・
 □jQueryグローバルメニュー
  用意する。


 さてさて・・・

  追記に  ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎  Wordpress:楽しや、テーマ選び の巻
                :お名前.comで

************************************************


 今回はまず、

Free Themes Directory
Free Themes Directory オリジナルサイトの
 フリーテーマでも、実に
 豊富だ。素晴らしい。




 ・早速気に入ったものが見つかったので,
  ダウンロード。
  ※この後、落とした zipファイルを
   アップロード・・・簡単。
 アップロード・・・簡単
   このあたり、進んでますよね。

 さて・・・と。


 まずグローバルメニューを考えよ。
 ※できれば、jQuery使って。
 ■グローバルメニュー
  ※前から気になっていたこれ(▼)を
   やってみる。

jDiv: A jQuery navigation menu alternative
jDiv: A jQuery navigation menu alternative




 

 □XHTMLで、
<!-- BEGIN MAIN NAV MENU--> 
<div id="gmenu">
<ul>
<li><a href="/created/try" id="menu1" title="トライ">トライ</a></li>
<li><a href="/created/tools" id="menu2" title="ツール">ツール</a></li>
<li><a href="/created/sample" id="menu3" title="サンプル">サンプル</a></li>
<li><a href="/created/toy" id="menu4" title="トーイ">トーイ</a></li>

</ul>
</div>
<!-- END MAIN NAV MENU-->

<!-- BEGIN HIDDEN DIV -->
<div id="hidden-div1" class="hidden-div">
<div id="hidden-div-left1" class="hidden-div-left">
<h4>創ったmetaboyサンプル。<br />
 まだまだ少ないのですけど、着実に増やしてゆきますね。<br />
 ・創ったmetaboy > トライ</h4>
</div>

<div id="hidden-div-right1" class="hidden-div-right">
<ul class="submenu">
<li><a href="/created/try/honJp" title="HonJp">&raquo; HonJp</a></li>
<li><a href="/created/try/okonomirankings" title="OkonomiRankings">&raquo; OkonomiRankings</a></li>
<li><a href="/created/try/sameweather" title="SameWeather">&raquo; SameWeather</a></li>
</ul>
</div>

</div>
<!-- END HIDDEN DIV -->
<!-- BEGIN HIDDEN DIV -->
<div id="hidden-div2" class="hidden-div">
<div id="hidden-div-left2" class="hidden-div-left">
<h4>創ったmetaboyサンプル。<br />
 まだまだ少ないのですけど、着実に増やしてゆきますね。<br />
 ・創ったmetaboy > ツール</h4>
</div>
・・・・・
 と用意しておき、

 

 □jQueryを利用して、
$(document).ready(function() {
var hide1 = false; var hide2 = false; var hide3 = false; var hide4 = false;
// Shows the DIV on hover with a fade in
$("#menu1").hover(function(){
if (hide1) clearTimeout(hide1);
$("#hidden-div1").fadeIn();
// The main nav menu item is assigned the 'active' CSS class
$(this).addClass("active");
}, function() {
// Fades out the DIV and removes the 'active' class from the main nav menu item
hide1 = setTimeout(function() {$("#hidden-div1").fadeOut("fast");});
$("#menu1").removeClass("active");
});
// Ensures the DIV displays when your mouse moves away from the main nav menu item
$("#hidden-div1").hover(function(){
if (hide1) clearTimeout(hide1);
$("#menu1").addClass("active");
}, function() {
// If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
hide1 = setTimeout(function() {$("#hidden-div1").fadeOut("fast");});
$("#hidden-div1").stop().fadeIn();
$("#menu1").removeClass("active");
});

$("#menu2").hover(function(){
if (hide2) clearTimeout(hide2);
$("#hidden-div2").fadeIn();
// The main nav menu item is assigned the 'active' CSS class
$(this).addClass("active");
}, function() {
// Fades out the DIV and removes the 'active' class from the main nav menu item
hide2 = setTimeout(function() {$("#hidden-div2").fadeOut("fast");});
$("#menu2").removeClass("active");
});
// Ensures the DIV displays when your mouse moves away from the main nav menu item
$("#hidden-div2").hover(function(){
if (hide2) clearTimeout(hide2);
$("#menu2").addClass("active");
}, function() {
// If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
hide2 = setTimeout(function() {$("#hidden-div2").fadeOut("fast");});
$("#hidden-div2").stop().fadeIn();
$("#menu2").removeClass("active");
});
・・・・・

 

 □CSS は、繰り返すので
  参考にしているところの div(#)参照ではなく、
#gmenu {
width: 960px;
height: 50px;
width: 600px;
height: 30px;
background: #e9e9e9;
clear: both;
}

.gline {
width: 960px;
width: 600px;
height: 1px;
margin: 40px 0;
background: #ddd;
overflow: hidden;
}

/* DIV MENU DEMO LIST STYLE */

#gmenu ul {
margin: 0;
padding: 0;
list-style: none;
}

#gmenu ul li {
display: inline;
}

#gmenu ul li a {
float: left;
display: block;
font: bold 1.1em arial,verdana,tahoma,sans-serif;
line-height: 50px;
line-height: 30px;
color: #888;
text-decoration: none;
margin: 0;
padding: 0 30px;
}

#gmenu ul li a:hover, #gmenu ul li a.active {
/* color: #aaa; */
color: #333333;
text-decoration: none;
/* background: #333; */
background: #CBC85D;
}

/* HIDDEN DIV PANEL STYLE */

.hidden-div {
position: absolute;
width: 750px;
height: 200px;
margin: -1px 0 0 0;
padding: 30px;
background: #CBC85D;
display: none;
z-index: 100;

border: 10px solid #CBC85D;
background: #FFF;
color: #6F6060;
}

/* HIDDEN DIV PANEL - CONTENT INSIDE */

.hidden-div-left {
float: left;
width: 350px;
height: 250px;
/* color: #fff; */
color: #6F6060;

}
.hidden-div-left h4{
color: #4A6147;
line-height: 120%;
font-size: 1.5em;
}
.hidden-div-left h3{
color: #4A6147;
line-height: 120%;
font-size: 1.4em;
}

.hidden-div-right {
float: right;
width: 350px;
height: 250px;
}

.hidden-div-right ul {
margin: 10px 0 0 0;
padding: 20px;
list-style: none;
background: #EAE77C;
overflow: hidden;
/* font-size:14px; */
}

.hidden-div-right ul li a {
display: block;
font-size: 1.3em;
line-height: 1.0em;
color: #21381E;
text-decoration: none;
margin: 0;
padding: 11px 0;
}

.hidden-div-right ul li a:hover {
color: #3A640B;
text-decoration: none;
}
 と、クラス(.)利用。

 

 ■創ったmetaboy においておきます。

jQuery利用した、サブウインドウオープン形式のグローバルメニュー習作サンプル
jQuery利用した、サブウインドウオープン形式のグローバルメニュー習作サンプル 実践では、もう少しデザインしなければ。



commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1316-135b0916
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。