Menu strony

syriusz118 · 2 Lutego 2014

Witam jak mogę zrobić takie menu na stronie , ze po kliknięciu na Home , nie mam navigacji , tylko niżej pojazia mi się zawartość home bez odświeżania ,

przykład 1

przykład 2

MrCrack99 · 2 Lutego 2014

Trochę css i js i po kłopocie, na google jest tego masa

Writen · 2 Lutego 2014

Chcesz się dowiedzieć jak samemu to zrobić?

Bo możesz sobie wybrać jakiś plugin do jQuery:

http://www.jqueryrain.com/example/jquery-tabs/

michci · 2 Lutego 2014

prosty skrypt js i php oraz css

syriusz118 · 2 Lutego 2014

Dzięki Writen . A te pluginy działają do Dreamweaver ?

Writen · 2 Lutego 2014

Myślę, że nie powinno być problemów. Ale niestety nigdy nie korzystałem z Dreamweaver.

syriusz118 · 2 Lutego 2014

Kurde , pobrałem navi content switcher , ale mam problem z dodaniem , mógłbyś mi powiedzieć jak to dokładnie zrobić ?

http://navi.grantcr.com/#!/home

slepiec68 · 2 Lutego 2014

zobacz to

proste, podane w ktoryms watku nie pamietam przez kogo ale dziala i nie trzeba sciagac wielkich framework-ow

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Moja Strona</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
   //Strona ladowana jako pierwsza:
   $('#content').load('pages/home.html');
 
   //Ladowanie pozostalych podstron:
   $('#menu a').click(function() {
      var podstrona = $(this).attr('href');
      $('#content').html('Ładuję...');
      $('#content').load('pages/'+podstrona);
      return false;
   });
});</script>
<style>
#menu {
	list-style: none;
}
#menu li a {
	background: silver;
	display: block;
	float: left;
	margin: 0 10px;
	width: 200px;
	text-align: center;
	line-height: 30px;
}
.clr {
	clear:both
}
</style>
</head>
<body>
<ul id="menu">
  <li><a href="home.html">Strona Główna</a></li>
  <li><a href="about.html">O Mnie</a></li>
  <li><a href="contact.html">Kontakt</a></li>
</ul>
<div class="clr"></div>
<div id="content"></div>
</body>
</html>

wszystkie strony do zaczytania wrucasz do katalogu pages i smiga

Writen · 2 Lutego 2014

@up Jak już tak chcesz, to czasem zwykłe return false; może nie wystarczyć. Trzeba zastosować:

event.preventDefault();

w celu zatrzymania odświeżania strony.

slepiec68 · 2 Lutego 2014

@up

SOA#1 = Standardowa Odpowiedz Admina nr 1 - "a u mnie dziala"

a jak napisalem to nie moj kod, ale go sprawdzilem

Writen · 2 Lutego 2014

Trzeba przewidywać takie rzeczy. Bo niektóre przeglądarki działają inaczej.

Również autorowi tematu proponuję wykorzystać ten kod. Niestety w innych pluginach do jQuery nie pomogę, bo nie korzystam.

syriusz118 · 3 Lutego 2014

Co jest złego w tym kodzie ? bo nie otwiera mi podstron

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="Scripts/jquery-1.11.0.min.js"></script>

<link href="Plugin/.htaccess" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
$(document).ready(function() { 
   //Strona ladowana jako pierwsza:
   $('#content').load('pages/home.html');
 
   //Ladowanie pozostalych podstron:
   $('#menu a').click(function() {
      var podstrona = $(this).attr('href');
      $('#content').html('');
      $('#content').load('pages/home.html');
	  $('#content').load('pages/Games.html');
	  $('#content').load('pages/contact.html');
      event.preventDefault();
   });
});</script>
</head>

<body>
<div id="all">
  <div id="slider">

</div>

<nav>

<ul id="menu">
  <li><a href="home.html">Home</a></li>
  <li><a href="Games.html">Games</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>
<div class="clr"></div>
<div id="content"></div>


</nav>
</div>

<div id="body">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

</div>
<footer></footer>
</div>


</body>
</html>

Writen · 3 Lutego 2014

Nie musiałeś modyfikować tego skryptu. Zostaw go tak jak był.

Te podstrony powinieneś mieć w folderze pages.

slepiec68 · 3 Lutego 2014

Syriusz tak z ciekawosci co robi ta konstrukcja?

<link href="Plugin/.htaccess" rel="stylesheet" type="text/css">

Writen · 3 Lutego 2014

Moim zdaniem nic nie robi. Nie wiem kto to wymyślił. Możesz to usunąć.

Ściągnąłeś plik jquery?

syriusz118 · 3 Lutego 2014

Tama Jquery , mam podstrony w folderze pages i musiałem go zmodyfikować bo chciałem mieć inne nazwy podstron i nie chciałem napisu Ładuje...

co do tego

<link href="Plugin/.htaccess" rel="stylesheet" type="text/css">

to po prostu zapomniałem usunąć

A do jquery jest ta ścieżka

<script type="text/javascript" src="Scripts/jquery-1.11.0.min.js"></script>

Wiem ze wiecie , tylko podkreślam ze dodałem

A to

<style>
#menu {
	list-style: none;
}
#menu li a {
	background: silver;
	display: block;
	float: left;
	margin: 0 10px;
	width: 200px;
	text-align: center;
	line-height: 30px;
}
.clr {
	clear:both
}
</style>

Wrzuciłem po prostu do style.css

Writen · 4 Lutego 2014

Mówię, że niepotrzebnie zmodyfikowałeś kod. Pewnie źle zrozumiałeś kod.

Adresy do podstron musisz ustalić w linkach, a nie w kodzie. Przywróć tak jak był.

syriusz118 · 5 Lutego 2014

Coś takiego ?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="Scripts/jquery-1.11.0.min.js"></script>

<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() { 
   //Strona ladowana jako pierwsza:
   $('#content').load('pages/home.html');
 
   //Ladowanie pozostalych podstron:
   $('#menu a').click(function() {
      var podstrona = $(this).attr('href');
      $('#content').html('');
	  $('#content').load('pages/'+podstrona);
      event.preventDefault();
   });
});</script>
</head>

<body>
<div id="all">
  <div id="slider">

</div>

<nav>

<ul id="menu">
  <li><a href="home.html">Home</a></li>
  <li><a href="Games.html">Games</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>
<div class="clr"></div>
<div id="content"></div>


</nav>
</div>

<div id="body">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

</div>
<footer></footer>
</div>


</body>
</html>

slepiec68 · 6 Lutego 2014

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="Scripts/jquery-1.11.0.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() { 
   //Strona ladowana jako pierwsza:
   $('#content').load('pages/home.html');
 
   //Ladowanie pozostalych podstron:
   $('#menu a').click(function() {
      var podstrona = $(this).attr('href');
      $('#content').html('');
	  $('#content').load('pages/'+podstrona);
      return false;
   });
});
</script>
</head>

<body>
<div id="all">
  <div id="slider"> </div>
  <nav>
    <ul id="menu">
      <li><a href="home.html">Home</a></li>
      <li><a href="Games.html">Games</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <div class="clr"></div>
  <div id="content"></div>
  <div id="body">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <footer></footer>
</div>
</body>
</html>

Troche uporzadkowalem kod do dzialajacej formy, np <nav> konczyl sie u Ciebie za "content" i bylo zamkniecie <div> za duzo

Teraz tylko css i strony na podmiane do katalogu pages i juz

syriusz118 · 6 Lutego 2014

Dzięki

syriusz118 · 8 Lutego 2014

Powiedz mi jeszcze proszę co mam jeszcze z tymi podstronami zrobić ? , umieściłem je w katalogu "pages" np: "pages/Games.html"

ale nie działa

syriusz118 · 9 Lutego 2014

@f5

Zaloguj się

👋 Witaj na MPCForum!

Menu strony

Rekomendowane odpowiedzi

Zarchiwizowany