📄 09c01-1.php
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Menu System</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head><body><?php// We need a container function that will create and output all parts to our// menuing system. It accepts an array for the menu, x/y coordinates for// where it should appear, a width for each menu (to make them look more// uniform), various colors, and a character 'index' for this menu. It can// be left off if you are only making one menu system on a page, give it a// different character if you are making a second system.function create_full_menu_system($menuarray, $x, $y, $width, $fgcolor, $bgcolor, $txtcolor, $bordercolor, $idx = 'a') { // First use create_menu to create the XHTML, and to give us // a list of all menus such created, we need them. $xhtml = ''; $menus = array(); create_menu($menuarray, $xhtml, $menus, $idx, $idx); // Now, before we output the xhtml, prepare the list of menus: $menulist = implode(',', $menus); // Now, output the CSS that we need custom to this menu system: echo "<style type=\"text/css\">#menu{$idx} { visibility: visible; padding: 0px;}.menu_{$idx} { position: absolute; top: {$x}px; left: {$y}px; visibility: hidden; border-top: 3px solid {$bordercolor}; padding: 0px 0px 0px 8px;}.menu_{$idx} ul { list-style-type: none; padding: 0px; margin: 0px; border-right: 1px solid {$bordercolor}; border-bottom: 1px solid {$bordercolor}; border-left: 1px solid {$bordercolor};}.menu_{$idx} li { border: 1px solid {$bordercolor};}.menu_{$idx} a { width: {$width}px; display: block; background-color: {$bgcolor}; text-align: right; text-decoration: none; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: {$txtcolor}; padding: 2px; margin: 0px;}.menu_{$idx} a:hover { background-color: {$fgcolor};}</style>"; // Now create the javascript needed to run this menu: echo "<script type=\"text/javascript\">function display_menu_{$idx}(main, submenu, line) { // First force all current menus to disappear except parents: remove_menus_{$idx}('menu' + main); // Make the appropriate submenu appear // Find the containing block of the parent: var pblock = document.getElementById('menu' + main); // Get the Y of the new div var y = line.offsetTop + pblock.offsetTop + 12; // Figure out the X of the new div: var x = pblock.offsetLeft + pblock.offsetWidth; // Now display it, and move it into position: var newblock = document.getElementById('menu' + main + submenu); newblock.style.top = y + 'px'; newblock.style.left = x + 'px'; newblock.style.visibility = 'visible'; // Now also clear the timeout like any other mouseover does: on_over_{$idx}();}// Create an array holding all submenus:document.submenus_{$idx} = new Array({$menulist});// Now a function, that by brute force, makes all submenus invisible// Has an optional parameter used by submenus, to ensure that their// parents do not get closed. Set it to '' to remove ALL.function remove_menus_{$idx}(except) { for (i = 0; i < document.submenus_{$idx}.length; i++) { // Only close this submenu if it doesn't match the 'except' menu if (document.submenus_{$idx}[i] != except.substr(0,document.submenus_{$idx}[i].length)) { document.getElementById(document.submenus_{$idx}[i] ).style.visibility = 'hidden'; } }}function on_out_{$idx}() { // Upon leaving a submenu, start a timer to clear it. document.menutimer_{$idx} = window.setTimeout(\"remove_menus_{$idx}('')\", 1000);}function on_over_{$idx}() { // When on a submenu, make sure the timer is gone. window.clearTimeout(document.menutimer_{$idx});}function on_over_clear_{$idx}() { // When on a primary menu's option without a submenu, clear subs remove_menus_{$idx}(''); on_over_{$idx}();}</script>"; // Now, finally, we can output the XHTML code: echo $xhtml;}// Now, we need a function that can be called recursively, that will// loop through this array, creating the XHTML for it.function create_menu($m, &$xhtml, &$menus, $subtext = 'a', $top = 'a') { // Prep the first character of subtext, we need it for the functions $idx = $subtext{0}; // Determine if this menu should kill itself upon mouseout: $mousediv = " onmouseout=\"on_out_{$idx}()\"onmouseover=\"on_over_{$idx}()\""; $mitem = ''; if ($subtext !== $top) { $mitem = " onmouseover=\"on_over_{$idx}()\""; } else { $mitem = " onmouseover=\"on_over_clear_{$idx}()\""; } // Start creating a container for this menu: $xhtml .= "<div id=\"menu{$subtext}\" class=\"menu_{$idx}\"{$mousediv}><ul id=\"list{$subtext}\">"; // Loop through all members of the array, outputting the menu $subs = array(); $counter = 'a'; foreach ($m as $name => $val) { // If this is an array: if (is_array($val)) { // Push the submenu into the subs array with the counter $subs[$counter] = $val; // Output the line: $xhtml .= "<li><a href=\"javascript:void(0)\" onmouseover=\"display_menu_{$idx}('{$subtext}','{$counter}',this)\" >{$name} >></a></li>"; // Increment the counter: $counter++; } else { // This is a URL, make a link: $xhtml .= "<li><a href=\"{$val}\"{$mitem}>{$name}</a></li>\n"; } } // Now finish the division: $xhtml .= "</ul></div>\n"; // Now recursively call this on every submenu: foreach ($subs as $stext => $submenu) { // First, quickly save a copy of the menuname: $menus[] = "'menu{$subtext}{$stext}'"; // Now call the function: create_menu($submenu, $xhtml, $menus, $subtext . $stext, $top); }}// Declare our menu system as an array with subarrays for submenus:$menu = array( 'Useful Sites' => array( 'Search Engines' => array( 'Google' => 'http://google.com/', 'Yahoo' => 'http://yahoo.com/' ), 'Web Browsers' => array( 'Mozilla' => 'http://mozilla.org/', 'Opera' => 'http://opera.com/' ) ), 'News' => array( 'BBC' => 'http://news.bbc.co.uk/', 'Washington Post' => 'http://washingtonpost.com/', 'New York Times' => 'http://nytimes.com/', 'Slashdot' => 'http://slashdot.org/' ), 'Home' => 'http://eliw.com/' ); // And create a second menu as well:$menu2 = array( 'Not Much' => array( 'To See' => array( 'Here' => array( 'Really!' => 'http://php.net/' ) ) ), 'Home' => 'http://eliw.com/' ); // Call it:create_full_menu_system($menu, 5, 5, 120, '#00CCFF', '#CCCCCC', 'blue', 'black');create_full_menu_system($menu2, 150, 250, 80, 'black', '#CC0000', 'white', '#660000', 'b');?></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -