Projects, Fun to Make, Fun to Use


Ever needed a quck drop down menu you could easily format and add or subtract to. The menu above is the one here described. It will always go 100% accross the parent div and auto adjusts to your list of parent tabs.



Download code here



<?php
//Created by Phil Powers as a drop in menu bar, customizable to your liking. 
//Follow the guidelines in top ph

//The following are style settings, these will alter the appearance of your menu.
$height="5";
$color1="#346DA1";	//primary menu color
$color2="#459CEB";	//primary menu hover color
$color4="#f9f9f9";	//primay color of dropdown	
$color3="#f1f1f1";	//color of dropdown hover
$font_color1="black";	//primary menu font color
$font_color2="black";	//primary menu font color hover
$font_color3="#346DA1"; 	//Dopdown font color
$font_color4="#459CEB"; 	//Dopdown font color hover

$tab_width=100/count($tab_list);

//These arrays are your menu items

	//this is your main menu list
	$tab_list=array("Home","Web Sites","Kodi Addons","HTML Addons","Raspberry Pi","Construction","Ministry","Store");

	//create a list like this for each dropdown
	$dlist1=array("Home");
	$dlist2=array("PowersParties.com","Zero-Nine","Blessing U","Grace Pointe Ohio","TollFree Dollars");
	$dlist3=array("Kodi Addons") ;
	$dlist4=array("Calander","Drop Down Menu");
	$dlist5=array("PBX System","Light Contoller","Garage Door Opener","Traffic Light");
	$dlist6=array("Tiny House");
	$dlist7=array("Christmas","Baby Shower","Birthday");
	$dlist8=array("Thing we Make and sell");

	//create a list like this for each dropdown for your links.
	$alist1=array("http://phillippowers.com/index.php");
	$alist2=array("http://powersparties.com","http://zero-nine.biz","http://blessingu.net","http://gracepointeohio.com","http://tollfreedollars.com");
	$alist3=array("index.php?inc=addons");
	$alist4=array("index.php?inc=calander","index.php?inc=ddm");
	$alist5=array("index.php?inc=pbx","index.php?inc=light","index.php?inc=garage","index.php?inc=traffic");
	$alist6=array("index.php?inc=tinyhouse");
	$alist7=array("index.php?inc=christmas","index.php?inc=baby","index.php?inc=birthday");
	$alist8=array("index.php?inc=store");
	//this is an array of your drop down lists, order is important.
	$lists=array($dlist1,$dlist2,$dlist3,$dlist4,$dlist5,$dlist6,$dlist7,$dlist8);

	//this is array of links, order should match above array
	$alists=array($alist1,$alist2,$alist3,$alist4,$alist5,$alist6,$alist7,$alist8);	




$width=100/count($tab_list);
$width=$width-($width * .05);

?>
<style>
.dropbtn {
    	background-color:rgba(0,0,0,.4);
    	color: #eee;
    	width:100%;
    	font-size: 1vw;
    	border: none;
    	cursor: pointer;
	text-align:center;

}

.dropdown {
    position: relative;
    display: inline-block;
    width:<?php echo $width; ?>%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color:<?php echo $color4; ?>;
    color:<?php echo $font_color3; ?>;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color:<?php echo $font_color3; ?>;
}

.dropdown-content a:hover {
	background-color:rgba(0, 0, 0, 0.5);;
    	color:#eee;
	}
	

.dropdown:hover .dropdown-content {
    	display: block;
	}

.dropdown:hover .dropbtn {
    background-color: <?php echo $color2; ?>;
    color:<?php echo $font_color2; ?>
}
</style>
</head>
<body>


<?php
$x=0;
foreach($tab_list as $t) {
	echo '

<div class="dropdown">
  <button class="dropbtn">' . $t . '</button>
  <div class="dropdown-content">';
     $y=0;
     foreach($lists[$x] as $l) {
	echo '
	<a href="' . $alists[$x][$y] . '">' . $l . '</a>';
	$y++;
	}
    echo '
  </div>
</div>';
$x++;
}

?>

</body>
</html>