/ Published in: PHP

URL: http://atdedesign.sqweebs.com/php_menu/
Expand |
Embed | Plain Text
1a. Make a folder for your new project (like php_menu or something) We will be making master.css, index.php, and body.php ;[FOLDER TREE]: [HOST FOLDER] -->inc [ --->body.php ] -->css [ --->master.css --->reset.css ] -> index.php 2. Open your IDE, I'm using PHP Designer, but you can definitely use notepad, or some IDE like notepad++. 3. Create a new PHP Document, save it as index.php [PHP for step 3] [index.php] <?php require_once "inc/body.php"; ?> 4. Create a new XHTML 1.01 transitional document. Enter the code from below [HTML for step 4] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht......dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PHP Menu</title> <link href="css/menu.css" rel="stylesheet" type="text/css" /> <link href="css/reset.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Header Start --><div id="header"> <h1>xTraCD: Quick PHP / XHTML / CSS Menu</h1> <!-- Navbar Start --><ul id="navbar"> <?php /** We will put code here next */ ?> <!-- Navbar Start --></ul> <!-- Header Start --></div> </body> </html> save it as body.php 5. The PHP code needed (goes in body.php in the <?php ?> tags [PHP for step 5] <?php // Now we make the menu constructor // with a foreach loop foreach ($menu_items as $menu_listing) // for each menu_item, call it menu_listing { echo "<li><a href='$menu_listing.php'>$menu_listing</a></li> \n"; // put out a list tag, with a link tag going to the "menu item".php, end it // and then make a new line. }; // Loop ends here ?> 6. Now go to http://yourtestingaddress/php_menu (ie. Mine is http://localhost/teaching_projects/php_menu) you should see a list like this: (# signs are bullet marks) # home # about # art # gallery # contact if not, check your code. 7. Styling the list. Make a new CSS Document. Enter in the following code: [css for step 6] @charset "utf-8"; /* PHP List style */ body { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:10pt; } #header { height:105px; width:1000px; margin:0 auto; border:1px solid #c0c0c0; -moz-border-radius-bottomleft:8px; -moz-border-radius-bottomright:8px; -webkit-border-bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px; } #header h1 { padding-top:30px; padding-left:15px; } #navbar { display:block; position:relative; width:1000px; height:40px; margin:0 auto; margin-top:18px; margin-left:-1px; padding:0; background-color:#eaeaea; -moz-border-radius-bottomleft:8px; -moz-border-radius-bottomright:8px; -webkit-border-bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px; border:1px solid #c0c0c0; text-align:center; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } #navbar li a { margin-left:80px; display:block; height:26px; width:100px; float:left; background-color:#ccc; margin:5px; padding-top:8px; -moz-border-radius-topleft:8px; -moz-border-radius-topright:8px; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; border:1px solid #c0c0c0; color:#333; font-size:10pt; text-decoration:none; } #navbar li a:hover { background-color:#aaa; color:#111; }
You need to login to post a comment.