サンプルページ　　　トップナビバー61

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ61　　top_navbar61.htm

ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ、ｽｸﾛｰﾙ時にﾌﾛｰﾃｨﾝｸﾞ（Animated Header Menu）、font-awesome.css（非画像ｱｲｺﾝ、背景色 : 白）。　　　　　　jQuery,DHTML。　　　　　　ﾒﾆｭｰｻｲｽﾞ、構成、配色、ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。　　　関連・詳細情報：font-awesome.css　New！icons　icons一覧　　　　top_navbar61a.htm（ﾓﾊﾞｲﾙ対応版）

ﾃﾞﾓは、ｽｸﾛｰﾙ時のAnimated Header Menuなどで。　　　　関連・詳細情報：　font-awesome.htm（ｻｲｽﾞ・色編集）

< ご使用方法 >

　・　保存は top_navbar61/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、top_navbar61.htm、03698110.js、03698110.css を右ｸﾘｯｸ、【名前を付けてﾘﾝｸを保存】 - <保存する場所>： ……、などで。　　※:　変わってしまった、ﾌｧｲﾙ名や、*.htm 中のﾊﾟｽは要修正。

　・　ﾍﾟｰｽﾄは、top_navbar61.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどの ”ﾃｷｽﾄﾓｰﾄﾞで、新しいﾍﾟｰｼﾞや hogehoge.htm（=任意の挿入先ﾌｧｲﾙ名）の、 <head>　～　</head> の任意の行間に (*1) を、さらに <body>　～　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。　　　※: ﾃｷｽﾄﾓｰﾄﾞ : ｺｰﾄﾞ/HTMLﾀｸﾞ挿入/HTMLﾒﾆｭｰなど。

　･　編集 : hogehoge.htm に ﾃｷｽﾄﾓｰﾄﾞでﾍﾟｰｽﾄ 後は、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄのﾃﾞｻﾞｲﾝや通常ﾓｰﾄﾞ、ﾃｷｽﾄﾓｰﾄﾞ、ﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。　　下記の（例） (*1) と、(*2) 、(*3) を参考に太字部分の編集を任意に行います。　

※: 外部ﾄﾞﾒｲﾝ（ｻｲﾄ）にｱｯﾌﾟﾛｰﾄの画像などの使用は、非表示に注意。　　画像の alt ﾀｸﾞは不可、ｻｲｽﾞ指定の pt などの省略は注意。　　ｽｸﾘﾌﾟﾄ構文中への改行混入に注意。

　･　ｱｯﾌﾟﾛｰﾄﾞは、hogehoge.htm と同じﾎﾙﾀﾞｰに、使用してる上記画像、*.js、*.css をｱｯﾌﾟﾛｰﾄﾞします。　　別ﾎﾙﾀﾞｰの場合は、hogehoge.htm の該当ﾊﾟｽ注意。

　・　作動ﾃｽﾄは Edge～などで。　　更新の確認は、ﾌﾞﾗｳｻﾞｰなどのｷｬｯｼｭのｸﾘｱ後に実施。　　(1) [F5]ｷ- or Ctrl+Rｷｰを押し、最新ﾃﾞｰﾀ読み込みで。　　更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [ﾌﾟﾗｲﾊﾞｼｰ、検索、ｻｰﾋﾞｽ] - [閲覧ﾃﾞ-ﾀをｸﾘｱ] - ［ｸﾘｱ-するﾃﾞ-ﾀの選択］ - ［ｖ］閲覧の履歴 -［今すくｸﾘｱ］をｸﾘｯｸ。　　留めに、(3) ｻｰﾊﾞｰのﾌｧｲﾙを一旦削除。

(*1) ：　top_navbar61.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕　

ｼﾌﾄJIS使用（削除不可）

互換表示

ieなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

font-awesome.css（CDN）

jQuery

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="03698110.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="03698110.js">
/***********************************************
* Animated Header Menu (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

</head>

(*2) ：　top_navbar61.htm （例）　　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

URL　ﾊﾞﾅｰ画像

URL　吹き出し　font-awesome.css
font-awesome.css ｻｲｽﾞ ｱｲｺﾝ色

吹き出し　URL　　ｻｲﾄ、ﾒﾆｭｰ名

以下、同様。

<body>

<header id="ddfixedheader">
<div id="logoarea">
<a id="logo" href="http://www　……　mi3c.html"><img src="http://www ……　a/title003a.png" /></a>
</div>
<div id="hamburgertoggler" class="uneven-hamburger-icon middlelong">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul id="ddmainulmenu">
<li><a href="http://www　……　/index2.html" target="_top" title="このﾍﾟｰｼﾞを破棄 ⇒ ﾎｰﾑ・太陽風ДζΨΠ∀2へ移動。"><i class="fa fa-home fa-lg" style="color:#a300f0" aria-hidden="true"></i></a></li>
<li><a href="#" title="太陽風ｺﾝﾃﾝﾂ"><i class="fa fa-link" aria-hidden="true"></i> 1</a>
<ul>
<li><a title="主なﾆｭｰｽﾍﾟｰｼﾞの記事ﾀｲﾄﾙ一覧" href="../rss_feed/rss_feed.htm"><img border="0" src="../text.gif" width="18" height="18" align="texttop"> News（RSS）</a></li>

==== この間､説明を省略｡ ====

<li><a href="http://xml-xsl.blog.so-net.ne.jp/" title="♫ｺﾚｸｼｮﾝ・You Tubeｿｰｽ">ﾌﾞﾛｸﾞ</a></li>
<li><a href="#" title="Facebookｻﾝﾌﾟﾙ"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><label id="search-label" title="Searchｻﾝﾌﾟﾙ"><i class="fa fa-search" aria-hidden="true"></i></label></li>
</ul>
</div>
</header>
<div id="ddsearchcontainer">

<form method="GET" action="http://www.google.co.jp/search">
<div align="left">
<input type="text" name="q" size="40" maxlength="255" value="ｷｰﾜｰﾄﾞをﾍﾟｰｽﾄするね！。" style="ime-mode:active" title="絞り込みは、ｽﾍﾟｰｽ区切りで複数ｷｰﾜｰﾄﾞを。" style="ime-mode: active; color:#260009; background-color:#F6F4FC;">
<input type=hidden name=hl value="ja">
<input type=hidden name=ie value=Shift_JIS>
<input TYPE="image" value="Web Search" name="btnG" src="../X3.gif" width="116" height="46" title="日本Googleで検索する祢。　=(・。.・)=　～*" align="top">
</div></form>
</div>
<div style="height:20px">
</div>
<script>
//initialize Animated Header Menu:
fixedheadermenu.init()
</script>

==== この間､説明を省略｡ ====

(*3) ：　03698110.css （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。　

　*.css、*.js の編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

ﾍｯﾀﾞｰﾌｫﾝﾄ

ﾍｯﾀﾞｰ画像幅

内余白　上下　左右

ﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時背景色
ﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時ﾃｷｽﾄ色

ﾍｯﾀﾞｰ画像幅

内余白　上下　左右

ﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時背景色
ﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時ﾃｷｽﾄ色

body {
/* body top margin so body content isnt' obscured by header */
margin-top: 90px;
}

/* ########## Fixed header ########## */
#ddfixedheader {
position: fixed;
display: flex;
left: 0;
top: 0;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #E7E4E2; /* ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ背景色　　*/
border-bottom: 4px solid purple; /* ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ下線の幅、種類、色　*/
width: 100%;
left: 0;
top: 0;
z-index: 1000;
font: bold 14px 'Bitter', sans-serif;　　　/body {
/* body top margin so body content isnt' obscured by header */
margin-top: 90px;
}

/* ########## Fixed header ########## */
#ddfixedheader {
position: fixed;
display: flex;
left: 0;
top: 0;
justify-content: space-between;
align-items: center;
padding: 10px;
background: white;
border-bottom: 5px solid purple;
width: 100%;
left: 0;
top: 0;
z-index: 1000;
font: bold 14px 'Bitter', sans-serif;　　　/* ﾍｯﾀﾞｰﾌｫﾝﾄ　　*/
/* use Google font */
transition: all .5s;
}

#ddfixedheader, #ddfixedheader * {
box-sizing: border-box;
}

/* ########## Left logo DIV area ########## */
#ddfixedheader #logoarea {
width: 535px;
margin-right: 0px;
}

#ddfixedheader #logo img {
width: 535px;　　/* 　ﾍｯﾀﾞｰ画像幅　 */
height: auto;
transition: all .5s;
}

/* ########## Uneven Line Menu ########## */
div.uneven-hamburger-icon {
width: 37px;
/* keep width/height ratio to 1.56 if changing dimensions */
height: 18px;
position: relative;
display: flex;
cursor: pointer;
flex-direction: column;
display: none;
margin-right: 25px;
justify-content: space-between;
}

div.uneven-hamburger-icon > div {
width: 80%;
height: 3px;
background: black;
transform-origin: 0 50%;
transition: all .5s;
}

div.uneven-hamburger-icon > div.line1 {
width: 100%;
}

/* ########## Center UL Menu inside Fixed Header ########## */

#ddfixedheader ul#ddmainulmenu {
margin-left: auto;
margin-right: 20px;
position: relative;
}

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

#ddfixedheader ul#ddmainulmenu a {
text-decoration: none;
padding: 5px 10px;
display: inline-block;
color: #484848;
}

#ddfixedheader ul#ddmainulmenu > li {
/* top level LIs */
display: inline-block;
position: relative;
}

#ddfixedheader ul#ddmainulmenu li > a {
/* top level LI links */
border-bottom: 5px solid #eee;
}

#ddfixedheader ul#ddmainulmenu > li:hover > a {
/* top level LI links */
background: #eee;
border-bottom-color: gray;
}

#ddfixedheader ul#ddmainulmenu li > a:after {
/* Arrow beneath top level LI links */
content: "";
position: absolute;
height: 0;
width: 0;
border: 6px solid transparent;
border-top-color: #eee;
bottom: -12px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

#ddfixedheader ul#ddmainulmenu li:hover > a:after {
/* Arrow beneath top level LI links hover style */
border-top-color: gray;
}

#ddfixedheader ul#ddmainulmenu li > a:only-child {
/* style for top level LI links with no sub UL */
border-bottom: none;
}

#ddfixedheader ul#ddmainulmenu li > a:only-child:after {
/* style for top level LI links with no sub UL */
display: none;
}

#ddfixedheader ul#ddmainulmenu > li > a:hover {
background: #eee;
color: black;
}

#ddfixedheader ul#ddmainulmenu > li ul {
/* sub ULs style */
position: absolute;
top: 100%;
left: 0;
border: 1px solid gray;
background: white;
overflow: hidden;
width: 280px;
opacity: 0;
visibility: hidden;
box-shadow: 4px 4px 2px rgba(0,0,0,.1);
transform: translateY(10%);
transition: opacity .3s, transform .3s, visibility 0s .3s;
}

#ddfixedheader ul#ddmainulmenu > li:hover > a {
color: black;
background: #eee;
}

#ddfixedheader ul#ddmainulmenu > li:hover ul {
opacity: 1;
overflow: auto;
visibility: visible;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity .5s, -webkit-transform .5s, visibility 0s;
transition: opacity .5s, transform .5s, visibility 0s;
}

#ddfixedheader ul#ddmainulmenu > li ul a {
display: block;
padding: 6px 15px;　 /*　内余白　上下　左右　　*/
}

#ddfixedheader ul#ddmainulmenu > li ul a:hover {
background: #E4E1E1;　　/*　ﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時背景色　　*/
color: #000000;　　/*　ﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時ﾃｷｽﾄ色　　*/
}

/* ########## Right DIV containing search and social icons ########## */
#ddfixedheader #rightarea {
font-size: 14px;
}

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

#ddfixedheader #rightarea ul li{
display: inline;
margin-right: 15px;
margin-bottom: 10px;
}

#ddfixedheader #rightarea ul li label {
cursor: pointer;
}

/* ########## Fixed header when user begins to scroll down ########## */
html.collapseheader #ddfixedheader {
position: fixed;
border-bottom-width: 0;
border-bottom-color: white;
box-shadow: 0 2px 2px #eee;
opacity: .9;
}

/* ########## Logo area when user begins to scroll down ########## */
html.collapseheader #ddfixedheader #logoarea {
width: 170px;
}

html.collapseheader #ddfixedheader #logo img {
width: 170px;
}

/* ########## Shared style for mobilemenucontainer and ddsearchcontainer DIVs ########## */
div#ddmobilemenucontainer, div#ddsearchcontainer {
position: fixed;
width: 100%;
z-index: 10000;
display: block;
background: purple;
left: -100%;
/* initially position container out of view */
top: 90px;
/* shift container downwards so the header is still visible when search is shown */
bottom: 0;
padding-top: 50px;
opacity: 0;
cursor: crosshair;
text-align: center;
font: bold 14px 'Bitter', sans-serif;
/* use google font */
-webkit-transform: scale(.9) translate3d(-0, -50px, 0);
transform: scale(.9) translate3d(-0, -50px, 0);
-webkit-transition: -webkit-transform .5s, opacity .5s, left 0s .5s;
transition: transform .5s, opacity .5s, left 0s .5s;
}

/* ######### Mobile Menu Container DIV style ######### */
div#ddmobilemenucontainer {
text-align: left;
overflow: auto;
}

div#ddmobilemenucontainer, div#ddmobilemenucontainer * {
box-sizing: border-box;
}

/* ########## Accordion Menu main UL style ########## */

div#ddmobilemenucontainer ul {
list-style: none;
margin: 0;
padding: 0;
width: 350px;
position: relative;
margin: 0 auto;
}

div#ddmobilemenucontainer ul li {
display: block;
posiion: relative;
}

div#ddmobilemenucontainer ul li a {
width: 100%;
display: block;
color: white;
text-decoration: none;
padding: 20px;
display: block;
box-sizing: border-box;
}

div#ddmobilemenucontainer ul li a:hover {
background: rgba(255,255,255,1);
color: black;
}

div#ddmobilemenucontainer ul li a.header {
/* style for accordion headers */
background: navy;
color: white;
outline: none;
}

div#ddmobilemenucontainer ul li a span.accordionarrow {
/* style for right arrow span added to headers */
position: absolute;
right: 10px;
transition: all .2s;
}

div#ddmobilemenucontainer ul li a.header.active {
/* style for accordion header when expanded */
background: black;
}

div#ddmobilemenucontainer ul li a.active span.accordionarrow {
/* style for right arrow span when header expanded */
transform: rotate(90deg);
}

div#ddmobilemenucontainer > ul ul {
/* hide sub ULs inside accordion by default */
display: none;
}

div#ddmobilemenucontainer > ul li ul a {
padding-left: 30px;
}

/* ########## DD Search Container DIV ########## */
div#ddsearchcontainer div {
padding: 5px;
color: white;
}

div#ddsearchcontainer form {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
-webkit-transition: all .5s 0s;
transition: all .5s 0s;
}

div#ddsearchcontainer form input[type="text"] {
width: 90%;
top: 0;
left: 0;
z-index: 99;
padding: 10px;
border: none;
border-bottom: 2px solid gray;
outline: none;
font-size: 3em;
background: #eee;
}

/* ########## Uneven Hamburger Icon style ########## */
html.openddmobilemenu div.uneven-hamburger-icon div.line1 {
width: 80%;
transform: rotate(45deg);
}

html.openddmobilemenu div.uneven-hamburger-icon div.line2 {
opacity: 0;
transform: translate3d(-10px,0,0);
}

html.openddmobilemenu div.uneven-hamburger-icon div.line3 {
transform: rotate(-45deg);
}

/* ########## Mobile Menu and Search Containers style when visible ########## */
html.openddmobilemenu div#ddmobilemenucontainer, html.opensearch div#ddsearchcontainer {
left: 0;
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
-webkit-transition: -webkit-transform .5s, opacity .5s, left 0s 0s;
transition: transform .5s, opacity .5s, left 0s 0s;
}

html.opensearch div#ddsearchcontainer form {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all .5s .5s;
}

/* ########## Media Query Breakpoints ########## */
@media (max-width: 860px) {
#ddfixedheader ul#ddmainulmenu {
display: none;
}

div.uneven-hamburger-icon {
display: flex;
margin-left: auto;
}
}

@media (max-width: 480px) {
#ddfixedheader #rightarea ul li:not(:first-of-type) {
display: none;
}

div#ddsearchcontainer form input[type="text"] {
width: 95%;
}
}　　*/
/* use Google font */
transition: all .5s;
}

#ddfixedheader, #ddfixedheader * {
box-sizing: border-box;
}

/* ########## Left logo DIV area ########## */
#ddfixedheader #logoarea {
width: 535px;
margin-right: 0px;
}

#ddfixedheader #logo img {
width: 535px;　　/* 　ﾍｯﾀﾞｰ画像幅　 */
height: auto;
transition: all .5s;
}

/* ########## Uneven Line Menu ########## */
div.uneven-hamburger-icon {
width: 37px;
/* keep width/height ratio to 1.56 if changing dimensions */
height: 18px;
position: relative;
display: flex;
cursor: pointer;
flex-direction: column;
display: none;
margin-right: 25px;
justify-content: space-between;
}

div.uneven-hamburger-icon > div {
width: 80%;
height: 3px;
background: black;
transform-origin: 0 50%;
transition: all .5s;
}

div.uneven-hamburger-icon > div.line1 {
width: 100%;
}

/* ########## Center UL Menu inside Fixed Header ########## */

#ddfixedheader ul#ddmainulmenu {
margin-left: auto;
margin-right: 20px;
position: relative;
}

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

#ddfixedheader ul#ddmainulmenu a {
text-decoration: none;
padding: 5px 10px;
display: inline-block;
color: #484848;
}

#ddfixedheader ul#ddmainulmenu > li {
/* top level LIs */
display: inline-block;
position: relative;
}

#ddfixedheader ul#ddmainulmenu li > a {
/* top level LI links */
border-bottom: 5px solid #eee;
}

#ddfixedheader ul#ddmainulmenu > li:hover > a {
/* top level LI links */
background: #eee;
border-bottom-color: gray;
}

#ddfixedheader ul#ddmainulmenu li > a:after {
/* Arrow beneath top level LI links */
content: "";
position: absolute;
height: 0;
width: 0;
border: 6px solid transparent;
border-top-color: #eee;
bottom: -12px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

#ddfixedheader ul#ddmainulmenu li:hover > a:after {
/* Arrow beneath top level LI links hover style */
border-top-color: gray;
}

#ddfixedheader ul#ddmainulmenu li > a:only-child {
/* style for top level LI links with no sub UL */
border-bottom: none;
}

#ddfixedheader ul#ddmainulmenu li > a:only-child:after {
/* style for top level LI links with no sub UL */
display: none;
}

#ddfixedheader ul#ddmainulmenu > li > a:hover {
background: #eee;
color: black;
}

#ddfixedheader ul#ddmainulmenu > li ul {
/* sub ULs style */
position: absolute;
top: 100%;
left: 0;
border: 1px solid gray;
background: white;
overflow: hidden;
width: 280px;
opacity: 0;
visibility: hidden;
box-shadow: 4px 4px 2px rgba(0,0,0,.1);
transform: translateY(10%);
transition: opacity .3s, transform .3s, visibility 0s .3s;
}

#ddfixedheader ul#ddmainulmenu > li:hover > a {
color: black;
background: #eee;
}

#ddfixedheader ul#ddmainulmenu > li:hover ul {
opacity: 1;
overflow: auto;
visibility: visible;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity .5s, -webkit-transform .5s, visibility 0s;
transition: opacity .5s, transform .5s, visibility 0s;
}

#ddfixedheader ul#ddmainulmenu > li ul a {
display: block;
padding: 6px 15px;　 /*　内余白　上下　左右　　*/
}

#ddfixedheader ul#ddmainulmenu > li ul a:hover {
background: #E4E1E1;　　/*　ﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時背景色　　*/
color: #000000;　　/*　ﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時ﾃｷｽﾄ色　　*/
}

/* ########## Right DIV containing search and social icons ########## */
#ddfixedheader #rightarea {
font-size: 14px;
}

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

#ddfixedheader #rightarea ul li{
display: inline;
margin-right: 15px;
margin-bottom: 10px;
}

#ddfixedheader #rightarea ul li label {
cursor: pointer;
}

/* ########## Fixed header when user begins to scroll down ########## */
html.collapseheader #ddfixedheader {
position: fixed;
border-bottom-width: 0;
border-bottom-color: white;
box-shadow: 0 2px 2px #eee;
opacity: .9;
}

/* ########## Logo area when user begins to scroll down ########## */
html.collapseheader #ddfixedheader #logoarea {
width: 170px;
}

html.collapseheader #ddfixedheader #logo img {
width: 170px;
}

/* ########## Shared style for mobilemenucontainer and ddsearchcontainer DIVs ########## */
div#ddmobilemenucontainer, div#ddsearchcontainer {
position: fixed;
width: 100%;
z-index: 10000;
display: block;
background: purple;
left: -100%;
/* initially position container out of view */
top: 90px;
/* shift container downwards so the header is still visible when search is shown */
bottom: 0;
padding-top: 50px;
opacity: 0;
cursor: crosshair;
text-align: center;
font: bold 14px 'Bitter', sans-serif;
/* use google font */
-webkit-transform: scale(.9) translate3d(-0, -50px, 0);
transform: scale(.9) translate3d(-0, -50px, 0);
-webkit-transition: -webkit-transform .5s, opacity .5s, left 0s .5s;
transition: transform .5s, opacity .5s, left 0s .5s;
}

/* ######### Mobile Menu Container DIV style ######### */
div#ddmobilemenucontainer {
text-align: left;
overflow: auto;
}

div#ddmobilemenucontainer, div#ddmobilemenucontainer * {
box-sizing: border-box;
}

/* ########## Accordion Menu main UL style ########## */

div#ddmobilemenucontainer ul {
list-style: none;
margin: 0;
padding: 0;
width: 350px;
position: relative;
margin: 0 auto;
}

div#ddmobilemenucontainer ul li {
display: block;
posiion: relative;
}

div#ddmobilemenucontainer ul li a {
width: 100%;
display: block;
color: white;
text-decoration: none;
padding: 20px;
display: block;
box-sizing: border-box;
}

div#ddmobilemenucontainer ul li a:hover {
background: rgba(255,255,255,1);
color: black;
}

div#ddmobilemenucontainer ul li a.header {
/* style for accordion headers */
background: navy;
color: white;
outline: none;
}

div#ddmobilemenucontainer ul li a span.accordionarrow {
/* style for right arrow span added to headers */
position: absolute;
right: 10px;
transition: all .2s;
}

div#ddmobilemenucontainer ul li a.header.active {
/* style for accordion header when expanded */
background: black;
}

div#ddmobilemenucontainer ul li a.active span.accordionarrow {
/* style for right arrow span when header expanded */
transform: rotate(90deg);
}

div#ddmobilemenucontainer > ul ul {
/* hide sub ULs inside accordion by default */
display: none;
}

div#ddmobilemenucontainer > ul li ul a {
padding-left: 30px;
}

/* ########## DD Search Container DIV ########## */
div#ddsearchcontainer div {
padding: 5px;
color: white;
}

div#ddsearchcontainer form {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
-webkit-transition: all .5s 0s;
transition: all .5s 0s;
}

div#ddsearchcontainer form input[type="text"] {
width: 90%;
top: 0;
left: 0;
z-index: 99;
padding: 10px;
border: none;
border-bottom: 2px solid gray;
outline: none;
font-size: 3em;
background: #eee;
}

/* ########## Uneven Hamburger Icon style ########## */
html.openddmobilemenu div.uneven-hamburger-icon div.line1 {
width: 80%;
transform: rotate(45deg);
}

html.openddmobilemenu div.uneven-hamburger-icon div.line2 {
opacity: 0;
transform: translate3d(-10px,0,0);
}

html.openddmobilemenu div.uneven-hamburger-icon div.line3 {
transform: rotate(-45deg);
}

/* ########## Mobile Menu and Search Containers style when visible ########## */
html.openddmobilemenu div#ddmobilemenucontainer, html.opensearch div#ddsearchcontainer {
left: 0;
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
-webkit-transition: -webkit-transform .5s, opacity .5s, left 0s 0s;
transition: transform .5s, opacity .5s, left 0s 0s;
}

html.opensearch div#ddsearchcontainer form {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all .5s .5s;
}

/* ########## Media Query Breakpoints ########## */
@media (max-width: 860px) {
#ddfixedheader ul#ddmainulmenu {
display: none;
}

div.uneven-hamburger-icon {
display: flex;
margin-left: auto;
}
}

@media (max-width: 480px) {
#ddfixedheader #rightarea ul li:not(:first-of-type) {
display: none;
}

div#ddsearchcontainer form input[type="text"] {
width: 95%;
}
}}

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

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。