HTML/CSS/javaに関する質問です。
以下のリンクにございますテンプレートを利用してページ作成しています。ハンバーガーメニュー(レスポンシブでPCサイズだと展開無しで横並びになります。)
の各項目のもともと記述されていた<a href>内に外部リンクを記述したところ一切ジャンプしません…テンプレートだと#からはじまるページ内リンクに対応しているようなのですが、外部リンクを設置したところ飛びませんでした。当方、コーディングやプログラミングは全くの初心者なので、あてずっぽうな予想ですがリンク先が#から始まるものでないとjavaが反応しないのかなど考えておりますが、HtmlとCSSの浅い知識だけしか持ち合わせておりませんので分からずじまいで大変困っております。
ご迷惑をおかけいたしますがどなたかお力添えをいただけないでしょうか。
よろしくお願い申し上げます。
リンク:
http://pixelhint.com/demo/volcano/
ファイル名:index.html
Html一部抜粋
1<!doctype html> 2<html class="no-js" lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Volcano - Free Responsive HTML5/CSS3 Zurb Foundation Template</title> 7 8 <!-- Stylesheet Files --> 9 <link rel="stylesheet" href="css/normalize.css" /> 10 <link rel="stylesheet" href="css/foundation.min.css" /> 11 <link rel="stylesheet" href="css/main.css" /> 12 13 <!-- Javascript files are placed before </body> --> 14 </head> 15 16 <body> 17 <!-- Start Hero Section --> 18 <section class="hero"> 19 <header> 20 <div class="row"> 21 22 23 <nav class="top-bar" data-topbar role="navigation"> 24 25 <!-- Start Logo --> 26 <ul class="title-area"> 27 <li class="name"> 28 <a href="#" class="logo"> 29 <h1>volcano<span class="tld">.com</span></h1> 30 </a> 31 </li> 32 <span class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></span> 33 </li> 34 </ul> 35 <!-- End Logo --> 36 37 <!-- Start Navigation Menu --> 38 <section class="top-bar-section" id="mean_nav"> 39 <ul class="right"> 40 <li><a href="#services">services</a></li> 41 <li><a href="#testimonials">Testimonials</a></li> 42 <li><a href="#Download">Download</a></li> 43 <li><a href="#connect">Connect</a></li> 44 </ul> 45 </section> 46 <!-- End Navigation Menu --> 47 48 </nav> 49 </div> 50 </header> 51 52 <!-- Start Hero Caption --> 53 <section class="caption"> 54 <div class="row"> 55 <h1 class="mean_cap">Responsive Template</hA> 56 <h2 class="sub_cap">Less Is More.</h2> 57 <a href="#" class="btn_details"><span>More Details</span> <img src="img/btn_arrow.png" alt="" src="" class="arrow"></a> 58 </div> 59 </section> 60 <!-- End Hero Caption --> 61 62 </section> 63 <!-- End Hero Section --> 64 65 66 67 68 69 <!-- Javascript Files --> 70 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 71 <script type="text/javascript" src="js/jquery.js"></script> 72 <script type="text/javascript" src="js/touchSwipe.min.js"></script> 73 <script type="text/javascript" src="js/easing.js"></script> 74 <script type="text/javascript" src="js/foundation.min.js"></script> 75 <script type="text/javascript" src="js/foundation/foundation.topbar.js"></script> 76 <script type="text/javascript" src="js/carouFredSel.js"></script> 77 <script type="text/javascript" src="js/scrollTo.js"></script> 78 <script type="text/javascript" src="js/map.js"></script> 79 <script type="text/javascript" src="js/main.js"></script> 80 81 </body> 82</html> 83
ファイル名:main.js
JavaScript(main.js)
1$(document).ready(function(){ 2 3 4 /* Foundation Init */ 5 $(document).foundation(); 6 7 8 9 /* carousel Init */ 10 $('#carousel').carouFredSel({ 11 width : '670', 12 pagination : ".pagination", 13 responsive : true, 14 scroll :{ 15 fx : 'fade' 16 }, 17 items :{ 18 visible : 1, 19 width : '670' 20 }, 21 swipe: { 22 onMouse: true, 23 onTouch: true 24 } 25 }); 26 27 28 29 30 31 /* Mean navigation menu scroll to */ 32 $('#mean_nav ul li a').click(function(e){ 33 e.preventDefault(); 34 scrollTo($(this).attr('href'), 900, 'easeInOutCubic'); 35 }); 36 37 38 39 40 41 42 /* Back to top button */ 43 var back_top = $('#back_top'); 44 45 back_top.click(function(e){ 46 e.preventDefault(); 47 scrollTo(0, 900, 'easeInOutCubic'); 48 49 }); 50 51 function scrollTo(target, speed, ease){ 52 $(window).scrollTo(target, speed, {easing:ease}); 53 } 54 55 $(window).on('scroll', function(){ 56 if($(this).scrollTop()>749) 57 { 58 back_top.stop().animate({opacity : 1}, 250); 59 }else 60 { 61 back_top.stop().animate({opacity : 0}, 250); 62 } 63 }); 64 65});