Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript] Odnośniki nie reagują w kodzie
Forum PHP.pl > Forum > Przedszkole
EoMusic
16.12.2011, 15:22:03
Witam.

Mam pewien problem a z tego że jestem początkujący proszę o jakąś rade lub poprawienie kodu.
Mój problem twki w tym że menu się ładnie wszystko wyświetla ale gdy klikam w jakiś odnośnik w menu np. NEWS to nic się nie dzieje.

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.                     <meta charset="utf-8" />
  5.  
  6.                     <title>CSS3 Animated Navigation Menu</title>
  7.  
  8.                     <!-- Our CSS stylesheet file -->
  9.                     <link rel="stylesheet" href="assets/css/styles.css" />
  10.  
  11.                     <!-- Including the Lobster font from Google's Font Directory -->
  12.                     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
  13.  
  14.                     <!-- Enabling HTML5 support for Internet Explorer -->
  15.                     <!--[if lt IE 9]>
  16.                                   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  17.                     <![endif]-->
  18.     </head>
  19.  
  20. <style>
  21. {
  22.                     margin: 0;
  23.                     padding: 0;
  24.                    }
  25.  
  26. /*----------------------------
  27. CSS3 Animated Navigation
  28. -----------------------------*/
  29. .fancyNav{
  30. /* Affects the UL element */
  31. overflow: hidden;
  32. position: absolute;
  33.             top:24px;
  34.             left:450px;
  35. }
  36. .fancyNav li{
  37. /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
  38. background-color: #f0f0f0;
  39. background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
  40. background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  41. background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  42. background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  43. background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  44. border-right: 1px solid rgba(9, 9, 9, 0.125);
  45. /* Adding a 1px inset highlight for a more polished efect: */
  46. box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
  47. -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
  48. -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
  49. position:relative;
  50. float: left;
  51. list-style: none;
  52.  
  53. }
  54. .fancyNav li:after{
  55. /* This creates a pseudo element inslide each LI */
  56. content:'.';
  57. text-indent:-9999px;
  58. overflow:hidden;
  59. position:absolute;
  60. width:100%;
  61. height:100%;
  62. top:0px;
  63. left:0px;
  64. z-index:1;
  65. opacity:0;
  66. /* Gradients! */
  67. background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
  68. background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  69. background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  70. background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  71. background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  72. /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
  73. box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
  74. -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
  75. -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
  76. /* This will create a smooth transition for the opacity property */
  77. -moz-transition:0.25s all;
  78. -webkit-transition:0.25s all;
  79. -o-transition:0.25s all;
  80. transition:0.25s all;
  81. }
  82. /* Treating the first LI and li:after elements separately */
  83. .fancyNav li:first-child{
  84. border-radius: 4px 0 0 4px;
  85. }
  86. .fancyNav li:first-child:after,
  87. .fancyNav li.selected:first-child:after{
  88. box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  89. -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  90. -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  91. border-radius:4px 0 0 4px;
  92. }
  93. .fancyNav li:last-child{
  94. border-radius: 0 4px 4px 0;
  95. }
  96. /* Treating the last LI and li:after elements separately */
  97. .fancyNav li:last-child:after,
  98. .fancyNav li.selected:last-child:after{
  99. box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
  100. -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
  101. -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
  102. border-radius:0 4px 4px 0;
  103. }
  104. .fancyNav li:hover:after,
  105. .fancyNav li.selected:after,
  106. .fancyNav li:target:after{
  107. /* This property triggers the CSS3 transition */
  108. opacity:1;
  109. }
  110. .fancyNav:hover li.selected:after,
  111. .fancyNav:hover li:target:after{
  112. /* Hides the targeted li when we are hovering on the UL */
  113. opacity:0;
  114. }
  115. .fancyNav li.selected:hover:after,
  116. .fancyNav li:target:hover:after{
  117. opacity:1 !important;
  118. }
  119. /* Styling the anchor elements */
  120. .fancyNav li a{
  121. color: #5d5d5d;
  122. display: inline-block;
  123. font: 20px/1 Lobster,Arial,sans-serif;
  124. padding: 12px 35px 14px;
  125. position: relativ;
  126.                     text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
  127. z-index:2;
  128. text-decoration:none !important;
  129. white-space:nowrap;
  130. }
  131. .fancyNav a.homeIcon{
  132. background:url('http://img215.imageshack.us/img215/5890/homexh.png') no-repeat center center;
  133. display: block;
  134. overflow: hidden;
  135. padding-left: 12px;
  136. padding-right: 12px;
  137. text-indent: -9999px;
  138. width: 16px;
  139. }
  140. </style>
  141.     <body>
  142.  
  143.                     <nav>
  144.                                     <ul class="fancyNav">
  145.                                                     <li id="home"><a href="link" class="homeIcon">Home</a></li>
  146.                                                     <li id="news"><a href="link">News</a></li>
  147.                                                     <li id="about"><a href="link">About us</a></li>
  148.                                                     <li id="services"><a href="link">Services</a></li>
  149.                                                     <li id="contact"><a href="link">Contact us</a></li>
  150.                                     </ul>
  151.                     </nav>
  152.  
  153.  
  154.  
  155.     </body>
  156. </html>
[PHP] pobierz, plaintext

Shili
16.12.2011, 16:15:11
Jesteś pewien, że nic się nie przeładuje?
Masz wszędzie taki sam href="" więc jeśli odpowiednio szybko Ci przeładuje stronę, to nawet nie zauważysz, że została przeładowana, bo i tak wylądujesz na tej samej stronie.
rossecki
16.12.2011, 17:05:54 
[HTML] pobierz, plaintext 
  1. </style>
  2.     <body>
  3.  
  4.                     <nav>
  5.                                     <ul class="fancyNav">
  6.                                                     <li id="home"><a href="1strona.html" class="homeIcon">Home</a></li>
  7.                                                     <li id="news"><a href="2strona.html">News</a></li>
  8.                                                     <li id="about"><a href="3strona.html">About us</a></li>
  9.                                                     <li id="services"><a href="4strona.html">Services</a></li>
  10.                                                     <li id="contact"><a href="5strona.html">Contact us</a></li>
  11.                                     </ul>
  12.                     </nav>
  13.  
  14.  
  15.  
  16.     </body>
  17. </html>
[HTML] pobierz, plaintext


1,2,3,4,5strona.html nazwy stron na jakie przycisk ma przekierować smile.gif
Poczytaj cokolwiek nt. html/css i wtedy bierz się za przerabianie szablonów smile.gif
EoMusic
16.12.2011, 17:15:15
dobra napisze inaczej bo widać nikt nie sprawdził chyba tego kodu.

Miałem tam wklejone linki a dokładnie wyglądało to tak
[PHP] pobierz, plaintext 
  1. <nav>
  2. <ul class="fancyNav">
  3. <li id="home"><a href="http://filmonline.dbv.pl/news.php" class="homeIcon">Home</a></li>
  4. <li id="news"><a href="http://filmonline.dbv.pl/news.php">News</a></li>
  5. <li id="about"><a href="http://filmonline.dbv.pl/news.php">About us</a></li>
  6. <li id="services"><a href="http://filmonline.dbv.pl/news.php">Services</a></li>
  7. <li id="contact"><a href="http://filmonline.dbv.pl/news.php">Contact us</a></li>
  8. </ul>
  9. </nav>
[PHP] pobierz, plaintext



Przykładowo dałem tylko 1 odnośnik do mojej strony (do strony głównej) i żaden przycisk w menu jak kliknę to nie reaguję, wszystko stoi nic mnie nie przenosi na stronę głowną.

Nawet jeśli kliknę na danym przycisku ppm to w okienku nie wyświetla się coś w stylu kopiuj odnośnik itp. tak jakby to była zwykła grafika.




P.S. Temat można zamknąć, problem już rozwiązałem wink.gif nie wiem jak ale jakoś poszło ;p
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.