質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

1回答

1791閲覧

スマホのナビが動かない

NM3

総合スコア15

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2017/04/14 12:28

編集2017/04/18 15:54

トップページはスマホナビが動くんでエスが下層ページだとスマホのナビが動きません。
調べたところ、下記javascriptが要因みたいんなのですが、どこが間違っていますでしょうか?

javascript

1jQuery(document).ready(function($){ 2 var slidesWrapper = $('.cd-hero-slider'); 3 4 //check if a .cd-hero-slider exists in the DOM 5 if ( slidesWrapper.length > 0 ) { 6 var primaryNav = $('.cd-primary-nav'), 7 sliderNav = $('.cd-slider-nav'), 8 navigationMarker = $('.cd-marker'), 9 slidesNumber = slidesWrapper.children('li').length, 10 visibleSlidePosition = 0, 11 autoPlayId, 12 autoPlayDelay = 5000; 13 14 //upload videos (if not on mobile devices) 15 uploadVideo(slidesWrapper); 16 17 //autoplay slider 18 setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay); 19 20 //on mobile - open/close primary navigation clicking/tapping the menu icon 21 primaryNav.on('click', function(event){ 22 if($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible'); 23 }); 24 25 //change visible slide 26 sliderNav.on('click', 'li', function(event){ 27 event.preventDefault(); 28 var selectedItem = $(this); 29 if(!selectedItem.hasClass('selected')) { 30 // if it's not already selected 31 var selectedPosition = selectedItem.index(), 32 activePosition = slidesWrapper.find('li.selected').index(); 33 34 if( activePosition < selectedPosition) { 35 nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition); 36 } else { 37 prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition); 38 } 39 40 //this is used for the autoplay 41 visibleSlidePosition = selectedPosition; 42 43 updateSliderNavigation(sliderNav, selectedPosition); 44 updateNavigationMarker(navigationMarker, selectedPosition+1); 45 //reset autoplay 46 setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay); 47 } 48 }); 49 } 50 51 function nextSlide(visibleSlide, container, pagination, n){ 52 visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 53 visibleSlide.removeClass('is-moving'); 54 }); 55 56 container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left'); 57 checkVideo(visibleSlide, container, n); 58 } 59 60 function prevSlide(visibleSlide, container, pagination, n){ 61 visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 62 visibleSlide.removeClass('is-moving'); 63 }); 64 65 container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left'); 66 checkVideo(visibleSlide, container, n); 67 } 68 69 function updateSliderNavigation(pagination, n) { 70 var navigationDot = pagination.find('.selected'); 71 navigationDot.removeClass('selected'); 72 pagination.find('li').eq(n).addClass('selected'); 73 } 74 75 function setAutoplay(wrapper, length, delay) { 76 if(wrapper.hasClass('autoplay')) { 77 clearInterval(autoPlayId); 78 autoPlayId = window.setInterval(function(){autoplaySlider(length)}, delay); 79 } 80 } 81 82 function autoplaySlider(length) { 83 if( visibleSlidePosition < length - 1) { 84 nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1); 85 visibleSlidePosition +=1; 86 } else { 87 prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0); 88 visibleSlidePosition = 0; 89 } 90 updateNavigationMarker(navigationMarker, visibleSlidePosition+1); 91 updateSliderNavigation(sliderNav, visibleSlidePosition); 92 } 93 94 function uploadVideo(container) { 95 container.find('.cd-bg-video-wrapper').each(function(){ 96 var videoWrapper = $(this); 97 if( videoWrapper.is(':visible') ) { 98 // if visible - we are not on a mobile device 99 var videoUrl = videoWrapper.data('video'), 100 video = $('<video loop><source src="'+videoUrl+'.mp4" type="video/mp4" /><source src="'+videoUrl+'.webm" type="video/webm" /></video>'); 101 video.appendTo(videoWrapper); 102 // play video if first slide 103 if(videoWrapper.parent('.cd-bg-video.selected').length > 0) video.get(0).play(); 104 } 105 }); 106 } 107 108 function checkVideo(hiddenSlide, container, n) { 109 //check if a video outside the viewport is playing - if yes, pause it 110 var hiddenVideo = hiddenSlide.find('video'); 111 if( hiddenVideo.length > 0 ) hiddenVideo.get(0).pause(); 112 113 //check if the select slide contains a video element - if yes, play the video 114 var visibleVideo = container.children('li').eq(n).find('video'); 115 if( visibleVideo.length > 0 ) visibleVideo.get(0).play(); 116 } 117 118 function updateNavigationMarker(marker, n) { 119 marker.removeClassPrefix('item').addClass('item-'+n); 120 } 121 122 $.fn.removeClassPrefix = function(prefix) { 123 //remove all classes starting with 'prefix' 124 this.each(function(i, el) { 125 var classes = el.className.split(" ").filter(function(c) { 126 return c.lastIndexOf(prefix, 0) !== 0; 127 }); 128 el.className = $.trim(classes.join(" ")); 129 }); 130 return this; 131 }; 132});

ページのURLです。
http://matumoto-motors.com/%E6%9D%BF%E9%87%91%E5%A1%97%E8%A3%85/

お手数をおかけいたしますが、何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

触ってみたところトップページでもナビゲーションメニューが開かない様子です。

main.jsが途中から始まっているように見えるのですが大丈夫でしょうか?また、気になったところとしては#nav-toggleがクリックされた際に#top-headを開くような実装になっていますが、HTML上にid="top-head"を持つような要素がなさそうです。

投稿2017/04/22 17:14

do7be

総合スコア41

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問