スマフォ用ヘッダーで、背景色の上に四つのアイコンをバランスよく配置したい
- 評価
- クリップ 0
- VIEW 861

退会済みユーザー
いつもお世話になっております。
以前に一度似た質問をさせて頂き、解決したと思ったのですがまた同じ現象が起こってしまいましたため、再度回答と頂きたく思っています。
現在フューチャーショップというモール内にてサイトを運営しております。
そこでスマートフォン用のサイドスライドメニューを実装したのですが、サイドメニューを開き再度閉じたときに、メインメニューの部分の読み込みに時間がかかるというか、数秒ほどブラウザいっぱいに開かず画面が小さくなってしまう現象があります。
↓このようなヘッダーを作りたいのですが、現在私の作ったヘッダーですと、読み込み時にたまにひっかかりがあり、そのときに、メインメニューも小さくなってしまっている気がします。
↓現在のデザイン
HTML
<!-- サイドメニュー中身 -->
<div class="slidemenu slidemenu-left">
<div class="slidemenu-body">
<ul class="slidemenu-content">
<li class="menu-item2"><a class="menu-item" href=""><b>WOMEN</b></a></li>
<li class="menu-item3"><a class="menu-item" href="">
<font color="#333333">>会員登録</font></a></li>
<li class="menu-item4"><a class="menu-item" href=""><font color="#333333">>ログイン</font></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">>ログアウト</font></a></li>
<li class="menu-item6"><a class="menu-item"><b>人気・新着・注目</b></a></li>
<li class="menu-item5"><a class="menu-item" href=""><font color="#333333">>SALEアイテム</font></a></li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>カテゴリ▼</b></a>
<ul>
<li class="menu-item10"><a href=""><font color="#333333">ワンピース</font></a></li>
<li class="menu-item10"><a href=""><font color="#333333">トップス<span class="fs80">(カットソー・キャミ・タンクトップ)</font></a></li>
</ul>
</li>
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';" class="menu-item6"><a class="menu-item"><b>ブランド▼</b></a>
<ul>
<li class="menu-item10"><a class="menu-item" href=""><font color="#333333">ー</font></a></li>
<li class="menu-item9"><a class="menu-item" href=""><b>・プライバシーポリシー</b>
<li class="menu-item9"><a class="menu-item" href=""><b>・特定商取引法に基づく表記</b></a></li>
</ul>
</div>
</div>
<!-- ヘッダー看板 -->
<header id="header">
<span class="button menu-button-left">
</span>
<div class="slidemenu_header_right2">
<a href=""><img src=""width="100%"></a>
</div>
<div class="slidemenu_header_left">
<img src="" width="100%">
</div>
<div class="slidemenu_header_center">
<a href=""><img src="" width="100%"></a></div>
<div class="slidemenu_header_right">
<a href=""><img src="" width="100%"></a>
</div>
</header>
<div class="header_box2"></div>
css
@charset "Shift_JIS";
body, div, span, p, blockquote, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub,
b, i, ol, ul, li,
footer, header, hgroup, menu, nav, section, summary,
time, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#slidemenu-body {
line-height: 1;
font-size: 14px;
font-family: HiraKakuProN-W3,"ヒラギノ角ゴ ProN W3",Helvetica,sans-serif;
color: #3a3a3a;
width: 100%;
min-width: 320px;
-webkit-text-size-adjust: none;
background: #fff;
}
nav ul {
list-style:none;
}
/*header*/
#header {
background: #f2bbbe;
overflow:hidden;
border-bottom: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
position: fixed;
z-index: 1;
top:0; /* Required!! */
}
.slidehed_box {
background: #ffffff;
border-bottom: 0px;
width: 100%;
height: 70px;
position: relative;
}
.slidemenu_header_left {
background: #f2bbbe;
border-bottom: 0px;
text-align: left;
width: 33%;
float:left;
}
.slidemenu_header_center {
background: #f2bbbe;
border-bottom: 0px;
text-align: center;
width: 33%;
float:left;
}
.slidemenu_header_right {
background: #f2bbbe;
border-bottom: 0px;
width: 33%;
float:left;
}
.slidemenu_header_right2 {
border-bottom: 0px;
position: absolute;
width: 17%;
right: 0;
top: 0;
}
.button {
width: 130px;
height: 70px;
position: absolute;
display: block;
background-repeat: no-repeat;
background-position: left top;
}
.menu-button-left {
left: 0px;
border-right: 0px
}
/*slidemenu*/
.slidemenu {
background-color: #595757;
}
.slidemenu li {
list-style: none;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
font-size:14px;
line-height: 1.8;
}
.slidemenu li a {
padding:10px 0 10px 20px;
display: block;
text-decoration: none;
color: #fff;
}
.slidemenu li:first-child {
border-top: none;
}
.slidemenu li:last-child {
border-bottom: none;
}
.slidemenu .slidemenu-header {
height: 80px;
border-bottom: 1px solid #000;
box-shadow: 0 1px 3px rgba(34,25,25,.4);
-moz-box-shadow: 0 1px 3px rgba(34,25,25,.4);
-webkit-box-shadow: 0 1px 3px rgba(34,25,25,.4);
background-color: #333;
}
.slidemenu .slidemenu-header div {
padding: 80px 0px 0px 19px;
text-decoration: none;
color: #fff;
}
/*slidemenu design*/
.menu-item1 {
background: #00a0e9;
}
.menu-item2 {
background: #e62e8b;
}
.menu-item3 {
background: #ffffff;
}
.menu-item4 {
background: #ffffff;
text-align: left;
}
.menu-item5 {
background: #ffffff;
text-align: left;
}
.menu-item6 {
background: #595757;
text-align: left;
}
.menu-item7 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item8 {
display: inline-block;
width:50%;
font-size: 60%;
margin:0;
background: #000000;
text-align: left;
white-space:nowrap;
}
.menu-item9 {
background: #000000;
text-align: left;
}
/*子メニュー*/
.menu-item10 {
background: #ffffff;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
text-align: left;
}
.slidemenu-content li a {
webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
/*main*/
#main {
clear:both;
position: relative;
top: 0px;
background-color: #fff;
padding: 0px 0px 0px 0px;
text-align: left;
}
.header_box{
background: #ffffff;
height: 60px;
}
.header_box2{
background: #f2bbbe;
height: 65px;
}
/*plugin*/
.slidemenu {
top: 0;
width: 260px;
position: fixed;
visibility: hidden;
z-index: -1;
}
.slidemenu .slidemenu-header {
position: relative;
}
.slidemenu .slidemenu-body {
height: 100%;
overflow: hidden;
position: relative;
}
.slidemenu .slidemenu-body .slidemenu-content {
position: relative;
}
/*プルダウン*/
ul.slidemenu-content {
list-style: none; /* 先頭記号を消す */
}
ul.slidemenu-content ul {
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
display: none; /* 通常は表示しない */
}
ul.slidemenu-content li:hover > ul {
display: block; /* マウスが乗ったら表示する */
}
ul.slidemenu-content a {
display: block; /* ブロックレベルに */
outline: none; /* 選択時の点線枠線を消す */
}
ul.slidemenu-content li.menu_on > ul {
display: block; /* 表示する */
}
ul.slidemenu-content li.menu_off > ul {
display: none; /* 表示しない */
}
.slidemenu-left {
left: 0;
}
※メニューを内包しているヘッダー部分に、(HTMLでいうと最後の部分です)
三つの画像を横にならべて、その上にもうひとつpng透過したカートアイコンのリンクを右に載せています。(大きさのバランスなどがうまく取れず、試した結果これが一番うまくいったので)
このヘッダーの作り方があまりスマートじゃないのかなと思っています。
ここを読み込むときに少しガクッとなるため、ブラウザの大きさが一時的に狭く判定されている気がします。
私の技量ですと、この方法でしか綺麗に画像を並べられなかったのですが、もっと良い方法があれば、提案いただけると幸いです。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
0
スライドメニューがどういったものなのかわからないので対策ではありませんが・・・
javascriptでスライドメニューを動かすタイプのものよりも、cssのanimationを使って動かすタイプのモノのほうが動作が軽いです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.31%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/17 21:37
2016/05/17 22:11
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
でどうでしょうか
2016/05/18 13:21
質問を多少補足・変更させて頂きました。また、お時間ありましたらのぞいて頂けると幸いです。
2016/05/18 14:05
それともその他の☆や■の画像も小さく表示されるのでしょうか?
現象が起きているときは
・header(緑背景)自体が短くなってbodyの白背景が見えている状態
・.slidemenu_header_leftが短くなっている状態(この部分の背景色を変えて確認することはできますか?)
・.slidemenu_header_leftの中に入っている画像だけが小さくなる状態
のどれになりますか?
仮に一番上の状態の場合スライドメニューを表示させるscript(おそらくsp-slidemenu.jsだと思うのですが)で設定を行っている箇所に問題がありそうな気がします。
またmenu-button-leftにもbackground-color:rgba(255,0,0,0.5);などを設定して、画像部分とのサイズがずれていないかも確認してみて、見た目ではなく実際にどの要素が短くなっているのが原因なのかを突き止めるのがいいと思います。
2016/05/18 14:52
質問部分にもう一枚画像を追加しましたが、一瞬小さくなるのはメインの商品写真がある部分で、ヘッダー部分は長さは正常に見えますが、
現象の起こるときは、slidemenu_header_rightが読み込み時にチラつく気がします。
ヘッダーの背景色を変えて、上記クラスの各長さをチェックしてみます。
2016/05/18 15:06
原因自体はサイドメニューが表示された時に画像の白背景部分の横幅が小さくなってしまうことだと思います。
サイドメニューの表示に使用しているjavascriptのデモページでviewportや白背景部分のcssがどうなっているかや、headerのposition:fixedに対応しているか等を一度確認されてみたほうがよさそうです。
2016/05/18 22:17