ホーム へ       サンプルページ  トップナビバー 58  top_navbar58.htm

トップナビバー、マウスオーバー展開、フェイド効果。 日本Google検索フォーム付き(100件表示/ページ)。      jQuery,DHTML。      メニュー、ハイパーリンク、配色などのカスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、メニュー展開、ハイパーリンクのクリックなどで。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、top_navbar58/をクリック開いたホルダーで top_navbar58.htm、0055887431.js、0055887431.css、*.gif を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※:  変わってしまった、ファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、top_navbar58.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2)(*3) を参考に太字部分の編集を任意に行います。     配色、サイズ、フォントなどの表示態様の編集は、0055887431.css で。    ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 10.x〜 などで開いて。     更新の確認は、[F5]キー を押し、最新データ読み込み、で。    あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ツール] - [インターネット オプション] - [閲覧の履歴] - [削除] などでも。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.js、*.css なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わってしまったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号5〃6スタイルシートリファレンスホームページ開設入門。   Web DevelopmentWeb開発IE10 互換性クックブック〃開発者向けガイド、IE API リファレンスIE 開発 > HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点XML〃リファレンスDHTML

 

(*1) : top_navbar58.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕   

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 下線
ハイパーリンク 色非指定
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent

お気に入り、タスクバーに表示するページ名(≠ファイル名)

CSS

 

 

 

 

 

jQuery
JavaScript

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
xa:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  トップナビバー 58</title>

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<link rel="stylesheet" type="text/css" href="0055887431.css" />
<!--[if lte IE 8]>
<style type="text/css">
.efluidmenu > ul{
margin-left: 25px;
}
.efluidmenu > ul li#search{
display: none;
}
.efluidmenu #sitelogo {
left: 0; /* position logo to the very left of menu in IE8 and below */
}
.efluidmenu #sitelogo a {
left: auto;
}
</style>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="0055887431.js">
/***********************************************
* eFluid Menu script (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
 

====  この間、説明を省略。  ====

 

 

(*2) : top_navbar58.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

 

 

 

URL
アイコン・画像ファイル名
URL メニュー・サイト名

URL 画像ファイル名
吹き出し サイト名

以下、同様。

 

 

 

 

 

 

 

 

 

 

 

 

 

吹き出し

アイコンファイル名  吹き出し

検索結果表示件数/ページ


<body>

<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" startspan -->
<div id="fluidmenu1" class="efluidmenu">
<a class="efluid-animateddrawer" href="#">
<span></span>
</a>
<ul>
<li id="sitelogo"><a href="http://www …… /oka/index2.html">
<img border="0" src="nsjava.gif" height="35PX" width="35PX" align="middle" title="ホーム(INDEXページ)へ"></a></li>
<li><a href="http://www./……/xxx.html">JavaScript応用方法</a>
<ul class="multicolumn">
<li><a href="https://www.youtube.com/user/OKATOSHO/playlists" target="_blank"><img align="absbottom" border="0" src="http:// …… left_menu8a/youtube_18x18.png" width="20" height="20" title="You Tube &#9835; Play List -クラシック"> You Tube &#9835; Play List -クラシック</a></li>
<li><a href="https://www.youtube.com/channel/UCXmEiderzO80D7LwhqXwuog/playlists" target="_blank"><img align="absbottom" border="0" src="http:// …… left_menu8a/youtube_18x18.png" width="20" height="20" title="You Tube &#9835; Play List -ジャズ・ワールドミュージック"> You Tube &#9835; Play List -ポップス</a></li>
<li><a href="http://xml-xsl.blog.so-net.ne.jp/index.xml" target="_blank"><img align="absbottom" border="0" src="http:// …… left_menu8a/t_rss.png" width="20" height="20" title="RSS feed!"> ブログRSS feed</a></li>
<li><a href="https://twitter.com/xml_xsl/media" target="_blank"><img align="absbottom" border="0" src="http:// …… left_menu8a/twitter_18x18.png" width="20" height="20" title="Twitter"> Twitter</a></li>
<li><a href="http://www. …… /gmap_select/gmap_select1.htm" target="_blank" title="リストらストリートビューを選択、右DIVに表示。">Google Mapsセレク ト1</a></li>
<li><a href="http:// …… google_maps28.htm" target="_blank" title="Webページにホテル検索 フォーム付きGoogle Mapを実装する。">世界のホテル検索28</a></li>
<li><a href="http:// …… google_maps30.htm" target="_blank" title="ポイントはペグマンのドラッグ、カメラ角度はマウスドラッグ、方角・進行は ← →、↑↓キーで。">ストリートビュー30</a></li>
<li><a href="http:// …… google_maps31.htm" target="_blank" title="Webページに物件検索フォーム付きGoogle Mapを実装する。">世界の建物・店舗検索31</a></li>
<li><a href="http:// …… google_maps32.htm" target="_blank" title="Webページに住所(PlaceID)検索フォーム付きGoogle Mapを実装する。">世界のPlaceID検索32</a></li>
<li><a href="http:// …… google_maps33.htm" target="_blank" title="Webページに”地下鉄路線”Transit laye 付きGoogle Mapを実装する。">世界の都市交通網33</a></li>
<li><a href="http:// …… google_maps34.htm" target="_blank" title="Traffic layer 付きGoogle Mapを実装する。">世界の道路交通量34</a></li>
<li><a href="http:// …… google_maps35.htm" target="_blank" title="Flickerの最新RSS Feedをまいかい表示。">世界のGeoRSS 35</a></li>
<li><a href="http://www./……/xxx.html">サイト    13</a></li>
<li><a href="http://www./……/xxx.html">サイト    14</a></li>
<li><a href="http://www./……/xxx.html">サイト    15</a></li>
<li><a href="http://www./……/xxx.html">サイト    16</a></li>
</ul>
</li>
<li><a href="http://www./……/xxx.html">  サイト  2  </a>
<ul class="multicolumn">
<li><a href="http://www./……/xxx.html">サイト    21</a></li>
<li><a href="http://www./……/xxx.html">サイト    22</a></li>
<li><a href="http://www./……/xxx.html">サイト    23</a></li>

====  この間、説明を省略。  ====

<li><a href="http://www./……/xxx.html">サイト    55</a></li>
<li><a href="http://www./……/xxx.html">サイト    56</a></li>
<li><a href="http://www./……/xxx.html">サイト    57</a></li>
<li><a href="http://www./……/xxx.html">サイト    58</a></li>
</ul>
</li>
<li id="search">
<form id="topform" method="GET" action="http://www.google.co.jp/search">
<div align="left">
<input style="ime-mode: active;" type="text" name="q" size="40" maxlength="400" value="" title="絞り込みは、スペース区切りで複数キーワードを。" style="color:#260009; background-color:#F6F4FC;">
<input type=hidden name=hl value="ja">
<input id="query_submit" type="image" src="magnify.gif" title="日本Googleで検索します。" />
<input type=hidden name=ie value=Shift_JIS>
<INPUT type="hidden" name=num value="100">
</form>
</li>
</ul>
</div>
<!--webbot bot="HTMLMarkup" endspan -->
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

 

(*3) 0055887431.css (例)         テキストエディターで開き、編集しhogehoge.htmlと同ディレクトリーに転送・配置します。 

   *.css、*.js の編集方法   (*3)をテキストエディターで開き、下記↓の太字部分を編集し使用。
  〔この列ペースト不要〕

トップナビバー背景色

 

 

 

 

 

 

メニュー全幅

 

 

 

 

 

 

メニュー  ハイパーリンク

ハイパーリンク文字色

フォント太字 サイズ 種類

 

 

 

 

 

 

 

 

 

ホームページアイコン

 

 

 

検索フォーーム

 

 

 

 

 

 

 

 

ハイパーリンク文字色

 

選択メニュー背景色
選択メニュー文字色

マウスオーバー時ハイパーリンク背景色
マウスオーバー時ハイパーリンク文字色

 

 

 

縦長1列サブメニュー幅

マウスオーバー時゙メニュー背景色

 

 

 

 

 

 

メニュー フォント種類

内余白

 

マウスオーバー時サブメニュー背景色

 

横長2列サブメニュー

〃幅

 

 

 

横長配置2列

.efluidmenu {
font: bold 14px Lucida Sans Regular,Arial;
background: #D6D4D4; /*  トップナビバー背景色  background of menu bar (default state)*/
color:#000000;
width: 100%;
position: relative;
}


.efluidmenu, .efluidmenu * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.efluidmenu > ul { /* style of top UL menu */
z-index: 100;
padding: 0;
list-style: none;
margin: 0 auto;
width: 100%;
position: relative;
max-width: 1280px; /* メニュー全幅   width of top UL menu */
}


.efluidmenu > ul li { /*Top level list items*/
position: relative;
display: inline-block;
margin-right: 26px; /* Spacing between level list items */
z-index: 100;
-webkit-perspective: 500px;
-moz-perspective: 500px;
perspective: 500px;
-webkit-perspective-origin: 50%;
-moz-perspective-origin: 50%;
perspective-origin: 50%;
}

.efluidmenu > ul li a { /* ハイパーリンク Top level menu link items style */
color: #000000; /*  ハイパーリンク文字色 */
display: inline-block;
padding: 11px 7px;
text-decoration: none;
font: bold 0.9em Lucida Sans Regular,Ariel; /* フォント太字 サイズ 種類   */
Xtext-transform: uppercase; /*  X=大文字変換を停止 */
line-height: 20px;
}


.efluidmenu > ul li#sitelogo {
margin-right: 10px;
width: 40px;
position: relative;
vertical-align: top;
}

.efluidmenu > ul li#sitelogo a{
padding: 0;
position: absolute;
top: 0;
line-height: normal;
display: block;
}

.efluidmenu > ul li#sitelogo a:hover{
background: none;
}

.efluidmenu > ul li#sitelogo a img{ /* ホームページアイコン   */
margin-top: 4px;
width: 35px;
border-width: 0;
}

ul li#search { /* style for LI that houses search form */
float: right;
margin-right: 5px;
padding-top: 7px;
}

ul li#search form { /*  検索フォーーム  */
position: relative;
width: 200px;
display: block;
}

ul li#search input[type="text"] { /*  検索フォーーム 入力窓  */
height: 28px;
width: 100%;
text-indent: 3px;
padding-right: 27px;
border-radius: 5px;
border: 1px solid #eee;
}

ul li #query_submit { /* submit button image position */
position: absolute;
right: 4px;
top: 22%;
}


.efluidmenu > ul li a:link, .efluidmenu ul li a:visited { /* ハイパーリンク文字色   */
color: #041C00;
}

.efluidmenu > ul li.selected a{ /*  CSS class that's dynamically added to the currently active menu items' LI element*/
background: #C5C3C0; /*  選択メニュー背景色 */
color: #000000; /*  選択メニュー文字色   */
}

.efluidmenu > ul li a:hover {
background: #E1E5C1; /* マウスオーバー時ハイパーリンク背景色   background of menu items during onmouseover (hover state)*/
color: #1C0043; /* マウスオーバーハイパーリンク文字色  */
}

/* ## Sub Menus CSS ## */

.efluidmenu ul li > ul {
position: absolute;
padding: 0;
left: 0;
width: 280px; /* 縦長1列サブメニュー幅  */
display: block;
background: #E1E5C1; /* マウスオーバー時゙メニュー背景色  */
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

}

/*Sub level menu list items (alters style from Top level List Items)*/

.efluidmenu ul li > ul li {
display: block;
margin-right: 0;
}

/* Sub level menu links style */

.efluidmenu ul li > ul li a {
font-family: Lucida Sans Regular,Arial; /* フォント種類  */
display: block;
 padding: 6px 10px; /* 内余白上下左右    */
margin-right: 0;
border-top-width: 0;
border-bottom: 1px solid #eee;
}

.efluidmenu ul li ul > li a:hover {
background: #E1E5C1; /* マウスオーバー時サブメニュー背景色  */
}

/* # Multiple columns UL sub menu # */ /* 横長2列サブメニュー  */
ul.multicolumn {
width: 480px !important; /* 〃 幅  */
left: 300px;
margin-bottom: 20px;
overflow: hidden;
}

ul.multicolumn li {
float: left;
display: inline;
}

ul.multicolumn li {
width: 50%; /* 横長配置2列  */
/* width: 33%; */ /* for 3 columns */
/* width: 25%; */ /* for 4 columns */
}

====  この間、説明を省略。  ====

width: 100%;
padding-left: 10px;

}

.efluidmenu ul li a:hover {
border-radius: 0;
}

.efluidmenu ul li#search {
display: block;
float: none;
padding-left: 3px;
}

.efluidmenu ul li#search form {
width: 100%;
}

.efluidmenu ul li ul {
display: none !important; /* force hiding of all drop down menus */
}

.efluidmenu .downarrow {
display: none;
}

}
 

< 補足 >    適時参照あれ!。

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。