advanced code snippet search

Posted By

xTraCD on 11/30/09


Tagged

css html xhtml


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

clac


Quick PHP Menu

 / Published in: PHP
 

URL: http://atdedesign.sqweebs.com/php_menu/

Expand | Embed | Plain Text 
  1. 1a. Make a folder for your new project (like php_menu or something) We will be making master.css, index.php, and body.php
  2.  
  3. ;[FOLDER TREE]:
  4.  
  5. [HOST FOLDER]
  6. -->inc [
  7. --->body.php
  8. ]
  9. -->css [
  10. --->master.css
  11. --->reset.css
  12. ]
  13. -> index.php
  14.  
  15. 2. Open your IDE, I'm using PHP Designer, but you can definitely use notepad, or some IDE like notepad++.
  16.  
  17. 3. Create a new PHP Document, save it as index.php
  18.  
  19.  
  20. [PHP for step 3]
  21.  
  22. [index.php]
  23. <?php
  24. require_once "inc/body.php";
  25. ?>
  26.  
  27.  
  28. 4. Create a new XHTML 1.01 transitional document. Enter the code from below
  29.  
  30.  
  31. [HTML for step 4]
  32.  
  33. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht......dtd">
  34. <html xmlns="http://www.w3.org/1999/xhtml">
  35. <head>
  36. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  37. <title>PHP Menu</title>
  38. <link href="css/menu.css" rel="stylesheet" type="text/css" />
  39. <link href="css/reset.css" rel="stylesheet" type="text/css" />
  40. </head>
  41. <body>
  42.  
  43. <!-- Header Start --><div id="header">
  44. <h1>xTraCD: Quick PHP / XHTML / CSS Menu</h1>
  45. <!-- Navbar Start --><ul id="navbar">
  46.  
  47. <?php
  48. /** We will put code here next */
  49. ?>
  50. <!-- Navbar Start --></ul>
  51. <!-- Header Start --></div>
  52. </body>
  53. </html>
  54.  
  55.  
  56.  
  57. save it as body.php
  58.  
  59. 5. The PHP code needed (goes in body.php in the <?php ?> tags
  60.  
  61. [PHP for step 5]
  62.  
  63. <?php
  64. $menu_items = array("home", "about", "art", "gallery", "contact"); // Menu items array
  65.  
  66. // Now we make the menu constructor
  67. // with a foreach loop
  68.  
  69. foreach ($menu_items as $menu_listing) // for each menu_item, call it menu_listing
  70. {
  71. echo "<li><a href='$menu_listing.php'>$menu_listing</a></li> \n";
  72. // put out a list tag, with a link tag going to the "menu item".php, end it
  73. // and then make a new line.
  74. };
  75.  
  76. // Loop ends here
  77.  
  78. ?>
  79.  
  80.  
  81.  
  82. 6. Now go to http://yourtestingaddress/php_menu
  83. (ie. Mine is http://localhost/teaching_projects/php_menu)
  84.  
  85. you should see a list like this:
  86. (# signs are bullet marks)
  87. # home
  88. # about
  89. # art
  90. # gallery
  91. # contact
  92.  
  93. if not, check your code.
  94.  
  95. 7. Styling the list.
  96.  
  97. Make a new CSS Document. Enter in the following code:
  98.  
  99. [css for step 6]
  100.  
  101. @charset "utf-8";
  102. /* PHP List style */
  103.  
  104. body {
  105. font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  106. font-size:10pt;
  107. }
  108.  
  109. #header {
  110. height:105px;
  111. width:1000px;
  112. margin:0 auto;
  113. border:1px solid #c0c0c0;
  114. -moz-border-radius-bottomleft:8px;
  115. -moz-border-radius-bottomright:8px;
  116. -webkit-border-bottom-left-radius:8px;
  117. -webkit-border-bottom-right-radius:8px;
  118. }
  119. #header h1 {
  120. padding-top:30px;
  121. padding-left:15px;
  122. }
  123.  
  124. #navbar {
  125. display:block;
  126. position:relative;
  127. width:1000px;
  128. height:40px;
  129. margin:0 auto;
  130. margin-top:18px;
  131. margin-left:-1px;
  132. padding:0;
  133. background-color:#eaeaea;
  134. -moz-border-radius-bottomleft:8px;
  135. -moz-border-radius-bottomright:8px;
  136. -webkit-border-bottom-left-radius:8px;
  137. -webkit-border-bottom-right-radius:8px;
  138. border:1px solid #c0c0c0;
  139. text-align:center;
  140. font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  141. }
  142.  
  143. #navbar li a {
  144. margin-left:80px;
  145. display:block;
  146. height:26px;
  147. width:100px;
  148. float:left;
  149. background-color:#ccc;
  150. margin:5px;
  151. padding-top:8px;
  152. -moz-border-radius-topleft:8px;
  153. -moz-border-radius-topright:8px;
  154. -webkit-border-top-left-radius:8px;
  155. -webkit-border-top-right-radius:8px;
  156. border:1px solid #c0c0c0;
  157. color:#333;
  158. font-size:10pt;
  159. text-decoration:none;
  160. }
  161.  
  162. #navbar li a:hover {
  163. background-color:#aaa;
  164. color:#111;
  165. }

Report this snippet  

You need to login to post a comment.