Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]menu dla każdej podstrony
Forum PHP.pl > Forum > Przedszkole
imysz
10.09.2009, 21:35:12
Witam. chodzi mi o zrobienie czegoś takiego jak na zdjęciu zarysowałem. W zależności od tego na której podstronie się znajdujemy wtedy bloczek z menu łączy się z dużym blokiem tekstu i podświetlony napis na kolor czerwony. jak widać na załączonym obrazku. I żeby zrobić tak do wszystkich. Jest to możliwe ?

http://www.fotosik.pl/pokaz_obrazek/66f7ef25f8e144c7.html


xhtml
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4.  
  5. <title>projekt_02</title>
  6. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  7. <meta http-equiv="content-language" content="pl" />
  8. <link rel="stylesheet" href="style.css" type="text/css" />
  9. </head>
  10.  
  11. <body>
  12. <div id="page">
  13.  
  14.    <div id="header">
  15.  
  16.    <form action="" method="post">
  17.    Login:
  18.    <input type="text" name="login" class="form_log" />
  19.    Password:
  20.    <input type="password" name="pass" class="form_log" />
  21.    <input type="submit" value="Zaloguj" />
  22.    </form>
  23.  
  24.    </div>
  25.  
  26.  
  27.  
  28.  
  29.             <div id="wrapper">
  30.             <p>text wrappertext wrapperteext wrapperteext wrapperteext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrapper</p>
  31.  
  32.                   <div id="menu">
  33.  
  34.                      <ul>
  35.                      <li class="first"><a class="first" href="">Home</a></li>
  36.                      <li><a class="Other" href="">Page 1</a></li>
  37.                      <li><a class="Other" href="">Page 2</a></li>
  38.                      <li><a class="Other" href="">Page 3</a></li>
  39.                      <li ><a class="Other" href="">Page 4</a></li>
  40.                      </ul>
  41.  
  42.                   </div>
  43.             </div>
  44.  
  45.  
  46. </div>
  47. </body>
[HTML] pobierz, plaintext



css
[HTML] pobierz, plaintext 
  1. body{
  2. background-color: #E8E8E8
  3. }
  4.  
  5. #header{
  6. 	background-color:white;
  7. 	width:785px;
  8. 	margin:0 auto;
  9. 	margin-top:10px;
  10. 	margin-bottom:20px;
  11. 	padding:8px;
  12. 	border: 1px solid #A9A9A9;
  13.  
  14. 	}
  15.  
  16.  
  17. #wrapper{
  18. 	background-color:white;
  19. 	margin: 0 auto;
  20. 	width:780px;
  21. 	padding:10px;
  22. 	border: 1px solid #A9A9A9;
  23. 	font-size:1.5em;
  24. 	font-family:Curier New;
  25. 	text-align:center;
  26.  
  27. 	}
  28.  
  29. #menu{
  30. 	position:relative;
  31. 	left:-179px;
  32. 	top:14px;	
  33. 	}
  34.  
  35. #menu ul{
  36. 	width:130px;
  37. 	font-size:15px;
  38. 	position:absolute;	
  39. 	margin-top:15px;
  40.  
  41. 	}
  42.  
  43. #menu li  {
  44. 	display: block;
  45. 	list-style: none;
  46.  
  47. 	}
  48.  
  49. #menu a  {
  50. 	display: block;
  51. 	text-decoration:none;
  52. 	padding:10px 10px 10px 10px;
  53. 	border:1px solid #a9a9a9;
  54. 	text-align:left;
  55. 	border-right: 1px solid white;
  56. 	font-weight:bold;
  57. 	font-size:12px;
  58. 	font-family:"Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
  59.  
  60.  
  61. 	}
  62.  
  63. #menu ul a:hover{
  64. 	color:#D51007;
  65. 	background:white;
  66. 	font-weight:bolder;
  67. 	}
  68. .first{
  69. 	margin-right:20px;
  70. 	width:110px;
  71. 	background-color:white;
  72. 	color:#D51007;
  73. 	border-bottom:0px solid white;
  74.  
  75. 	}
  76. .Other{
  77. 	background-image: url('media/menubg.png') ;
  78. 	color:gray;
  79. 	}
  80. .form_log{
  81. 		background-image:url('media/formbg.gif');
  82. 	}
[HTML] pobierz, plaintext
Burned
10.09.2009, 23:05:06
W zależności od wybranej strony określasz dla linka odpowiednią klasę.
W twoim przypadku może to być np tak:
[HTML] pobierz, plaintext 
  1. <ul>
  2.     <li class="menu_item"><a class="menu_link" href="">Home</a></li>
  3.     <li class="menu_item selected"><a class="menu_link selected" href="">Page 1</a></li>
  4.     <li class="menu_item"><a class="menu_link" href="">Page 2</a></li>
  5.     <li class="menu_item"><a class="menu_link" href="">Page 3</a></li>
  6. </ul>
[HTML] pobierz, plaintext

Piszesz css zawierający style dla klas menu_item i menu_link i osobne dla klas selected.
owned
10.09.2009, 23:58:22
Żeby to w miarę zautomatyzować utwórz sobie tablicę i pobieraj funkcją GET $id podstrony a potem do konkretnego link dodawaj class smile.gif
imysz
11.09.2009, 12:13:10
okej, już zrobiłem to że tak powiem 'ręcznie', a ciekawi mnie jak byłoby to zrobione tak jak zaproponował owned, można to jakoś przybliżyć ?

pozdrawiam
Burned
11.09.2009, 13:33:14
Cytat(imysz @ 11.09.2009, 13:13:10 ) *
okej, już zrobiłem to że tak powiem 'ręcznie', a ciekawi mnie jak byłoby to zrobione tak jak zaproponował owned, można to jakoś przybliżyć ?

pozdrawiam

Robisz jedną stronę php, która w zależności od parametru w tablicy $_GET podmienia zawartość strony (przykładowo include'uje różne pliki. Przy okazji tworzysz także warunki w menu sprawdzające na której aktualnie stronie się znajdujesz i w zależności od tego dodających odpowiednią nazwę klasy do atrybutu 'class' tego elementu, który ma być wybrany,
owned
11.09.2009, 14:10:07
No właśnie. To by musiało wyglądać mniej więcej tak, że jest jeden plik index.php do którego includujesz tresc podstrong np about.php, contact.php itp. Do każdego href linka musisz dodać na końcu np ?id=about a w index.php linijke
[PHP] pobierz, plaintext 
  1. $id = $_GET['id'];
[PHP] pobierz, plaintext

potem za pomocą instrukcji warunkowych np stwitch sprawdzasz id:
[HTML] pobierz, plaintext 
  1. <div id="onas" 
  2. <?php
  3. switch $id {
  4. case 'about':
  5.  echo "class='selected'";
  6.  break;
  7. default:
  8.  echo "class='normal'";
  9.  break;
  10. }
  11. ?>
  12. >
  13. tekst
  14. </div>
[HTML] pobierz, plaintext


Oczywiście to jest dosyć prymitywny przykład ale myślę że wpadniesz dalej na to jak zrobić uniwersalny skrypt smile.gif
imysz
22.10.2009, 17:14:14 
[PHP] pobierz, plaintext 
  1. <?php
  2. $menu = array(
  3. 	'home.' => 'home',
  4. 	'szukaj' => 'szukaj',
  5. 	'shuffle' => 'shuffle',
  6. 	'komentarz' => 'komentarz',
  7.     'uploader' => 'uploader'
  8. );
  9.  
  10. $current = isset($_GET['id']) ? $_GET['id'] : NULL;
  11.  
  12. if (!isset($menu[$current])) {
  13. 	$current = 'glowna';
  14. }
  15. ?>
  16.  
  17. <ul>
  18.  
  19. <?php foreach ($menu as $key => $item): ?>
  20. <li><a href="?id=<?php echo $key; ?>" title="<?php echo $item; ?>"<?php echo ($key == $current ? ' class="main"' : ''); ?>><?php echo $item; ?></a></li>
  21. <?php endforeach; ?>
  22.  
  23. </ul>
[PHP] pobierz, plaintext


mam teraz coś takiego, jak zmodyfikować ten kod by podczas przełączenia w menu wczytywane zostały pliki np. uploader.php itd. czy jest jakiś prostszy sposób na żeby otrzymać ten sam efekt ?

pozdrawiam
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.