Q&A
ShunsukeIzuiさん
ご回答頂きありがとうございます！！！
正常に作動いたしました！
ちなみにmenu.htmlをFTPへアップしてそれを
index.htmlでifreamで見込んだ際に正常に作動しないのですが、
ここをifreamの中でも正常に作動するにはどのように修正すれば実現できますでしょうか？？
またコメント頂きましたindex.phpですが、
こちらの使用方法が分かりません。。。
申し訳ございませんが、
再度ご教授頂けましたら幸いです。
![サンプル画像]WIDTH:595
今回上記画像の様なメニューを今回作成したいと考えております。
実際のスクロールをした際の挙動に関しましては、
下記URLをご参照ください。
【参考URL】：http://haremachi.com/hanpu/
上記メニューに関して、できるだけCSSのみで作成したいと考えておりますが、
最悪jqueryを用いての作成も考えております。
最終的には、上記で作成したメニューをifreamタグで複数のページ上へ設置したいと考えており、
出来ればレスポンシブな構造にできればとてもいいなと思っております。
こちらの件に関してHTMLやCSSの記述方法に詳しい方、
是非ご教授頂けましたら幸いです。
回答2件
0
思ってたより簡単にできたので、iframe利用版を載せます。
各ページのHTMLメニュー部分
lang
1<!DOCTYPE html> 2 3<html lang="ja"> 4 5<head> 6 7<meta charset="UTF-8"> 8 9<!-- メニュー固定に必要なcssファイル --> 10<link href="./css/test.css" rel="stylesheet" type="text/css" media="all"> 11 12<!-- jQueryとメニュー固定用のjsファイル --> 13<script src="./js/jquery-1.11.2.min.js" type="text/javacsript"></script> 14<script src="./js/test.js" type="text/javascript"></script> 15 16<title>test</title> 17 18</head> 19 20<body> 21 22<!-- ここでメニューを読み込む --> 23<iframe class="menu_frame" src="./menu.html" frameborder="0" scrolling="no"></iframe> 24 25</body> 26</html>
menu-2.html
lang
1<!DOCTYPE html> 2 3<html lang="ja"> 4 5<head> 6 7<meta charset="UTF-8"> 8 9<!-- メニュー用cssファイル --> 10<link href="./css/menu.css" rel="stylesheet" type="text/css" media="all"> 11 12<!-- 念のためjQueryのjsファイル --> 13<script src="./js/jquery-1.11.2.min.js" type="text/javacsript"></script> 14 15<title>メニュー</title> 16 17</head> 18 19<body> 20<ul> 21 <li class="logo hidden"><a href="#"><img src="ロゴ画像のパス" alt="logo"></a></li> 22 <li><a href="#">menu</a></li> 23 <li><a href="#">menu</a></li> 24 <li><a href="#">menu</a></li> 25 <li><a href="#">menu</a></li> 26 <li class="logo"><a href="#"><img src="ロゴ画像のパス" alt="logo"></a></li> 27 <li><a href="#">menu</a></li> 28 <li><a href="#">menu</a></li> 29 <li><a href="#">menu</a></li> 30 <li><a href="#">menu</a></li> 31</ul> 32</body> 33</html>
cssファイルはメニュー用とその他のページ用の2つになります。
menu.css
lang
1body { 2 background-color:black; 3} 4ul { 5 list-style: none; 6 width:100%; 7 display:-webkit-flexbox; 8 display:-moz-flexbox; 9 display:-ms-flexbox; 10 display:-o-flexbox; 11 display:flexbox; 12 display:flex; 13 justify-content:center; 14} 15ul li { 16 width:calc(100% / 9); 17} 18ul li a { 19 color:white; 20 text-decoration:none; 21} 22a:hover { 23 text-decoration:underline; 24} 25.hidden { 26 display:none; 27}
ページ用css
lang
1.menu_frame { 2 height:2000px; 3} 4 5.fix { 6 position:fixed; 7} 8
test.js
lang
1$(function(){ 2 $(".menu_frame").css({width:"100%"}); 3 4 var eleHeight = $(".menu_frame").height(); 5 var isFixed = false; 6 $(window).on("scroll", function(e){ 7 if($(window).scrollTop() > 100){ 8 if(!isFixed){ 9 $(".menu_frame").addClass("fix"); 10 $(".menu_frame").css({top: "-" + eleHeight + "px"}); 11 $(".menu_frame").animate({top:"0px"}); 12 $(".menu_frame").contents().find(".logo").toggle(); 13 isFixed = true; 14 } 15 } else { 16 if(isFixed){ 17 $(".menu_frame").removeClass("fix"); 18 $(".menu_frame").contents().find(".logo").toggle(); 19 isFixed = false; 20 } 21 } 22 }); 23 //画面遷移を行うための処理を追加 24 $(".menu_frame").on("load", function(e){ 25 $(".menu_frame").contents().find("a").on("click", function(e){ 26 e.preventDefault(); 27 e.stopPropagation(); 28 window.location.href = $(this).attr("href"); 29 }); 30 }); 31});
投稿2015/04/24 07:32
編集2015/04/24 07:33
総合スコア1698
0
cssのみではおそらくできないかと思います。
jQueryを利用して簡単にですが、作ってみました。
以下にソースコードを載せますので、参考にしてください。
注）今回のソースでは、iframeは利用していません。PHPのinclude関数を利用してメニューを読み込んでいます。
index.php
lang
1 2<!DOCTYPE html> 3 4<html lang="ja"> 5 6<head> 7 8<meta charset="UTF-8"> 9 10<!-- メニュー固定に必要なcssファイル --> 11<link href="./css/test.css" rel="stylesheet" type="text/css" media="all"> 12 13<!-- jQueryとメニュー固定用のjsファイル --> 14<script src="./js/jquery-1.11.2.min.js" type="text/javacsript"></script> 15<script src="./js/test.js" type="text/javascript"></script> 16 17<title>test</title> 18 19</head> 20 21<body> 22 23<!-- ここでメニューを読み込む --> 24<?php include "./menu.html"; ?> 25 26</body> 27</html>
menu.html
今回、ロゴは２か所用意して、表示・非表示を切り替えることで場所を移動させてます。
lang
1<div class="header-wrapper"> 2 <nav> 3 <ul> 4 <li class="logo hidden"><a href="#"><img src="ロゴ画像のパス" alt="logo"></a></li> 5 <li><a href="#">menu</a></li> 6 <li><a href="#">menu</a></li> 7 <li><a href="#">menu</a></li> 8 <li><a href="#">menu</a></li> 9 <li class="logo"><a href="#"><img src="ロゴ画像のパス" alt="logo"></a></li> 10 <li><a href="#">menu</a></li> 11 <li><a href="#">menu</a></li> 12 <li><a href="#">menu</a></li> 13 <li><a href="#">menu</a></li> 14 </ul> 15 </nav> 16</div>
test.css
lang
1.header-wrapper { 2 background-color:black; 3 width:100%; 4 overflow:hidden; 5 position:relative; 6} 7.header-wrapper ul { 8 list-style: none; 9 width:100%; 10 display:-webkit-flexbox; 11 display:-moz-flexbox; 12 display:-ms-flexbox; 13 display:-o-flexbox; 14 display:flexbox; 15 display:flex; 16 justify-content:center; 17} 18.header-wrapper ul li { 19 width:calc(100% / 9); 20} 21.header-wrapper ul li a { 22 color:white; 23 text-decoration:none; 24} 25.header-wrapper a:hover { 26 text-decoration:underline; 27} 28.fix { 29 position:fixed; 30} 31.hidden { 32 display:none; 33}
test.js
lang
1$(function(){ 2 var eleHeight = $(".header-wrapper").height(); 3 var isFixed = false; 4 $(window).on("scroll", function(e){ 5 if($(window).scrollTop() > 100){ 6 if(!isFixed){ 7 $(".header-wrapper").addClass("fix"); 8 $(".header-wrapper").css({top: "-" + eleHeight + "px"}); 9 $(".header-wrapper").animate({top:"0px"}); 10 $(".logo").toggle(); 11 isFixed = true; 12 } 13 } else { 14 if(isFixed){ 15 $(".header-wrapper").removeClass("fix"); 16 $(".logo").toggle(); 17 isFixed = false; 18 } 19 } 20 }); 21});
投稿2015/04/24 06:00
総合スコア1698
phpを利用することはできないでしょうか?
できないようでしたら、iframeを利用したものを記述いたしますが・・・
申し訳ございません。
私の勉強不足にてphpの使用方法が分かりません。。。
宜しければifream用でご教授頂けましたら幸いです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/24 07:35
2015/04/24 07:45
2015/04/24 07:47