Actual Image of the table:
Here's my "menu.php" content wherein I'm looping my Parent & Sub Categories together.
<?php
function loop_array($array = array(), $parentID = 0) {
if (!empty($array[$parentID])) {
echo '<ul>';
foreach ($array[$parentID] as $items) {
echo '<li>';
echo $items['categoryName'];
loop_array($array, $items['categoryID']);
echo '</li>';
}
echo '</ul>';
}
}
function display_menus() {
$con = mysqli_connect("localhost", "root", "", "submenu");
$query = $con->query("SELECT * FROM category");
$array = array();
if (mysqli_num_rows($query)) {
while ($rows = mysqli_fetch_array($query)) {
$array[$rows['parentID']][] = $rows;
}
loop_array($array);
}
}
And, here's my "index.php" where I'm calling the "display_menus()" function to display all the categories and sub categories from this SQL TABLE.
<?php require 'menu.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Sub Menu Test</title>
</head>
<body>
<?php
display_menus();
?>
</body>
</html>
After connecting these two PHP pages. I'm getting this result exact result:
Lastly, My problem is. How do I integrate this with CSS? That will look like a navigation menu with sub menus. I tried different tutorials in YouTube but I failed. Is there any CSS Menu Builder or other sources that has compatibility with this code? Thank you so much!
For integrating CSS with HTML (any element), you need to add a CSS file to your HTML file.
Need to add classes, ids selectors to your elements.
And add definitions to those classes, ids.
For example (inline stylesheet):
<style>
.left { /* Class for left aligned elements*/
float: left; /* This is attribute to be modified*/
}
#page-header { /* For element with id page-header*/
font-weight: bold; /* This is attribute to be modified*/
}
</style>
in HTML,
<div id="page-header">Welcome to StackOverflow</div>
<div class="left">Tips to ask Questions on SO</div>
<ul class="left">
<li>Search on Google for your problem</li>
<li>Don't put why this code doesn't work on Question</li>
</ul>
Also, Back to your question, for menus, we can use suprefish library.
Here's my CSS content where I'm calling it in my index.php as
<div id="cssmenu">
<?php
display_menus();
?>
and changed my menu.php function loop_aray into:
function loop_array($array = array(), $parentID = 0){
if(!empty($array[$parentID])){
echo '<ul class="cssmenu">';
foreach($array[$parentID] as $items){
echo '<li class="has-sub">';
echo $items['categoryName'];
loop_array($array, $items['categoryID']);
echo '</li>';
}
echo '</ul>';
}
}
This is what I'm GETTING and this is what I want as the OUTPUT.
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 10px;
line-height: 15px;
text-transform: uppercase;
text-align: left;
}
#cssmenu > ul {
width: auto;
list-style-type: none;
padding: 0;
margin: 0;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 3px solid #d9ced2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
#cssmenu > ul li#responsive-tab {
display: none;
/* Hide for large screens */
}
#cssmenu > ul li {
display: inline-block;
*display: inline;
zoom: 1;
}
#cssmenu > ul li.right {
float: right;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
display: block;
}
#cssmenu > ul li.has-sub ul {
display: none;
width: 250px;
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 3px solid #d9ced2;
border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display: block;
}
#cssmenu > ul li.has-sub > a {
background-image: url('images/caret.png');
background-repeat: no-repeat;
background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
background: #d80041 url('images/caret.png') no-repeat;
background-position: 90% 195%;
}
#cssmenu > ul li a {
display: block;
padding: 12px 24px 11px 24px;
text-decoration: none;
color: #747474;
text-shadow: 0px 1px 0px #fff;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
background: #d80041;
color: #fff;
text-shadow: 0px 1px 0px #000;
}
#media (max-width: 600px) {
#cssmenu > ul {
width: 100%;
}
#cssmenu > ul li#responsive-tab {
display: block;
}
#cssmenu > ul li#responsive-tab a {
background: url('images/menu.png') no-repeat;
background-position: 95% -35%;
}
#cssmenu > ul li#responsive-tab a:hover {
background-color: #d80041;
background-position: 95% 135%;
}
#cssmenu > ul li {
display: none;
}
#cssmenu > ul li.right {
float: none;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub ul {
display: block;
position: static;
width: 100%;
background: #ffffff;
border: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display: block !important;
}
#cssmenu > ul li.has-sub ul li a span {
display: block;
padding-left: 24px;
}
#cssmenu > ul li.has-sub > a {
background-image: none;
}
}
/* Make sure they show even if hidden in mobile view by JS */
#media (min-width: 600px) {
#cssmenu > ul > li.collapsed {
display: inline-block !important;
*display: inline;
zoom: 1;
}
#cssmenu > ul ul li.collapsed {
display: block !important;
}
}
Related
I am trying to get the header of my site and the navigation on the same line. I want the header to be aligned left and the navigation to be centered. My code doesn't seem to be working, so I was wondering if anyone has any solutions? Thanks in advance.
an example of what I am trying to have it look like...
my header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<!-- site-header -->
<header class="site-header">
<h1><?php bloginfo('name'); ?></h1>
<h5><?php bloginfo('description'); ?></h5>
<nav class="site-nav">
<?php
wp_nav_menu(array(
'menu' => 'Primary Menu Links',
'container_id' => 'cssmenu',
'walker' => new CSS_Menu_Walker()
));
?>
</nav>
</header>
</div>
my css
.site-header h1 {
margin: 0;
font-family: 'futura_tbold';
font-size: 24px;
text-align: left;
text-transform: uppercase;
letter-spacing: 6px;
padding-top: 20px;
position: fixed;
z-index: 10000;
}
/* Drop Down Menu */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
}
#cssmenu {
height: 37px;
text-align: center;
margin-bottom:50px;
width: 0 auto;
margin-right:38px;
}
#cssmenu,
#cssmenu > ul > li > ul > li a:hover
}
#cssmenu > ul {
}
#cssmenu > ul > li {
list-style: inside none;
position: relative;
display: inline-block;
}
#cssmenu > ul > li > a {
display: block;
position: relative;
padding: 12px 20px;
text-align: center;
text-decoration: none;
font-size: 13px;
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
color: #2f3847;
text-transform:uppercase;
letter-spacing: 1px;
font-weight:normal;
-webkit-font-smoothing: antialiased;
}
#cssmenu > ul > li > a:hover {
color:#8F1E3E;
}
#cssmenu > ul > li:first-child > a {
}
#cssmenu > ul > li > a:after {
content: '';
position: absolute;
}
#cssmenu ul li.has-sub:hover > a:after {
position: absolute;
top: 28px;
left: 11px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #3d0d1d;
border-left: 7px solid transparent;
border-bottom-color: rgba(61, 13, 29, 1);
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #3d0d1d transparent;
}
#cssmenu > ul > li.has-sub > a:before {
}
#cssmenu > ul > li.has-sub:hover > a:before {
}
#cssmenu ul li.has-sub:hover > a {
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
display: block;
}
#cssmenu ul li.has-sub > a:hover {
color: #8F1E3E;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
display: none;
width: auto;
position: absolute;
top: 38px;
padding: 10px 0;
background: #490f20;
border-radius: 0px 0px 0px 0px;
z-index: 999;
}
#cssmenu ul li > ul {
width: 200px;
}
#cssmenu ul li > ul li {
display: block;
list-style: inside none;
padding: 0;
margin: 0;
position: relative;
}
#cssmenu ul li > ul li a {
outline: none;
display: block;
position: relative;
margin: 0;
padding: 8px 20px;
color: #ffffff;
text-decoration: none;
text-align: left;
font-size: 13px;
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
text-transform:uppercase;
letter-spacing: 1px;
font-weight:normal;
-webkit-font-smoothing: antialiased;
line-height:25px;
}
#cssmenu ul ul a:hover {
color: #ffffff;
background-color:#8F1E3E;
}
#cssmenu > ul > li.has-sub > a:hover:before {
border-top: 5px solid #ffffff;
}
Here you go buddy hope this helps
Jsfiddle
<div class="navigation">
<div class="container">
<div class="logo">
<!-- <img src="#" alt=""> -->
<span>LOGO</span>
</div>
<nav>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
</div>
</div>
.navigation {
float: left;
width: 100%;
padding: 10px 0;
border-bottom: 2px solid black;
}
.container {
max-width: 90%;
margin: 0 auto;
position: relative;
}
.logo {
position: absolute;
top: 0;
left: 0;
}
nav ul {
margin: 0 auto;
text-align: center;
}
nav ul li {
display: inline-block;
}
Can't find what is wrong with my menu. I want that when you hover a sub menu item background color would be only for submenu not for menu items. I tried everything here is menu css.
I tried #menu ul li a:hover but still affect menu items and sub items..... And I need only subitems.
#menu
{
list-style: none;
padding-right: 8%;
float: right;
padding-top: 3.5%;
clear: right;
text-indent: 10px;
}
#menu ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#menu ul a
{
display: block;
color: #FFF;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#menu ul li
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
#menu ul li.current-menu-item
{
}
#menu ul li:hover
{
}
#menu ul ul
{
display: none;
position: absolute;
top: 92%;
left: -64%;
padding: 0;
background-color: #4d4d4d;
}
#menu ul ul li
{
float: none;
width: 190px;
}
#menu ul ul a
{
line-height: 120%;
padding: 10px 15px;
}
#menu ul ul ul
{
top: 0;
left: 100%;
}
#menu ul li:hover > ul
{
display: block;
}
<?php
$args = array(
'theme_location' => 'pre_primary'
);
?>
<?php wp_nav_menu( $args); ?>
Use immediate child selector!
#menu > ul > li > a:hover
To style anchors in nested list use the following css selector:
#menu li ul li a:hover
It will affect only second level items.
I have a responsive navigation bar that I have added to a WordPress theme. But I would like a submenu drop-down to be added to my responsive navigation bar but im unsure how to do this. I am new to PHP and WordPress.
HTML
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu( $args ); ?>
</ul>
Menu
</nav>
CSS
nav {
height: 40px;
width: 100%;
color: #fff;
background: #86c024;
font-size: 11pt;
position: relative;
}
nav ul {
padding: 0;
margin: 0 auto;
max-width:1000px;
width: 100%;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
padding: 0 10px;
border-right: 1px solid #fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li a:link, a:visited {
color: white
}
nav li:last-child a {
border-right: 0;
}
nav a:hover {
background: #2098d1;
}
nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited,
.site-header nav ul li.current-page-ancestor a:link,
.site-header nav ul li.current-page-ancestor a:visited {
font-weight: bold;
background: #2098d1;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width : 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background: #86c024;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('img/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Javascript
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
additional CSS attempt
ul.sub-menu { /* this targets all sub menus */
display: none; /* hide all sub menus from view */
position: absolute;
z-index: 10;
top: 40px; /* this should be the same height as the top level menu -- height + padding + borders */
}
ul.sub-menu li { /* this targets all submenu items */
width: 100px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}
ul.sub-menu li a { /* target all sub menu item links */
padding: 5px 10px; /* give our sub menu links a nice button feel */
}
ul.sub-menu li:hover {
display: block; /* show sub menus when hovering over a parent */
}
I have adjust some of your css and html, please check its working now.
the main problem is in the height of nav also I have change the position of a#pull to the top of the ul.
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
nav {
width: 100%;
color: #fff;
background: #86c024;
font-size: 11pt;
position: relative;
height: 100%;
overflow: hidden;
}
nav ul {
padding: 0;
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
nav li {
display: inline;
float: left;
height: 40px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
padding: 0 10px;
border-right: 1px solid #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li a:link,
a:visited {
color: white
}
nav li:last-child a {
border-right: 0;
}
nav a:hover {
background: #2098d1;
}
nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited,
.site-header nav ul li.current-page-ancestor a:link,
.site-header nav ul li.current-page-ancestor a:visited {
font-weight: bold;
background: #2098d1;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background: #86c024;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('img/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
#media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
}
<nav>
Menu
<ul>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
</ul>
</nav>
Anyone can tell me what's wrong with these code...
I can't make sub menu to be shown...
I think my mistake at the part where I call sub menu from database. But I checked, there is nothing wrong..
maybe there are some mistake at css. but I don't know...
php code:
<html>
<head>
<link rel="stylesheet" href="<?php echo"css/copy.css" ?>" type="text/css" />
</head>
<?php include "koneksi.php"?>
<body>
<div id="page-wrap">
<ul class="dropdown">
<?php
/*where I select main menu from table mainmemnu*/
$main = mysql_query("SELECT * FROM mainmenu WHERE aktif='Y'");
while($r=mysql_fetch_array($main))
{
echo"<li><a href='$r[link]'><span>$r[nama_menu]</span></a>";
/*where I select sub menu from table submenu*/
$sub = mysql_query
("SELECT * FROM submenu, mainmenu WHERE submenu.id_main = mainmenu.id_main AND submenu.id_main=$r[id_main]");
$jml = mysql_num_rows($sub);
if($jml > 0)
{
echo"<div><ul>";
while($w = mysql_fetch_array($sub))
{
echo
"<li>
<a href='$w[link_sub]'>
<span>
» $w[nama_sub]
</span>
</a>
</li>";
}
echo"</ul></div></li>";
}
else
{
echo"</li>";
}
}
?>
</ul>
</div>
</body>
</html>
css code:
* {margin: 0; padding: 0;}
body {font: 14px Helvetica, San-Serif;}
#page-wrap{width: 800px; margin: 0px auto; padding-left: 419px;}
a { text-decoration: none; }
ul { list-style: none; }
p { margin: 15px 0; }
/* Level One */
ul.dropdown{position: relative;}
ul.dropdown li{font-weight: bold; float: left; zoom: 1; background: #ccc;}
ul.dropdown a:hover{color: #000;text-decoration: none;}
ul.dropdown a:active{color: #222;}
ul.dropdown li a{display: block; padding: 4px 8px; border-right: 1px solid #333; color:#222;}
ul.dropdown li:last-child a{border-right: none;}
ul.dropdown li.hover, ul.dropdown li:hover{background: #ffa500; color: black; position: relative; z-index: 9;}
ul.dropdown li.hover a{color: black;}
/* Level Two */
ul.dropdown ul{width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}
ul.dropdown ul li{font-weight: normal; background: #DCDCDC; color: #000; z-index: 9; border-bottom: 1px solid #ccc; float: none;}
ul.dropdown ul li a{border-right:none; width:100%; display: inline-block;}
the sub menu won't come out when i bring cursor on the menu...
I would like to see what the HTML generated by the code looks like, but IMO, you are using way too many divs, spans, tags that are not needed..
Check out if this jsfiddle can help you out, its made purely out of HTML & CSS.
This is the part of the CSS you might be missing.
ul.dropdown > li > ul {
display: none;
}
ul.dropdown > li:hover > ul {
display: block;
}
http://jsfiddle.net/x9D37/
You need a javascript to manipulate the block you want to see when hovering over a tag.
You cannot hover over a hidden tag.
You are missing the css that will make the child div display.
Basically it comes down to:
/*hiding initially*/
.dropdown li ul
{
position: absolute;
display: none;
}
/*display selectively*/
.dropdown li:hover > ul
{
display: block;
}
This question already has answers here:
Centering a css dropdown menu
(2 answers)
Closed 8 years ago.
How can I center the menu/navigation in header?
PHP file looks like this
<div class="menu-and-contact-wrap">
<?php
$header_phone = get_option('theme_header_phone');
if( !empty($header_phone) ){
echo '<h2 class="contact-number"><i class="fa fa-phone"></i>'.$header_phone.' <span class="outer-strip"></span></h2>';
}
?>
<!-- Start Main Menu-->
<nav class="main-menu">
<?php
wp_nav_menu( array(
'theme_location' => 'main-menu',
'menu_class' => 'clearfix'
));
?>
</nav>
<!-- End Main Menu -->
</div>
And CSS file looks like this
.menu-and-contact-wrap {
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
.main-menu {
margin-top: 42px;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
.main-menu ul {
list-style: none;
margin: 0;
}
.main-menu ul li {
float: left;
position: relative;
}
.main-menu ul li.current-menu-ancestor > a, .main-menu ul li.current-menu-parent > a, .main-menu ul li.current-menu-item > a, .main-menu ul li.current_page_item > a, .main-menu ul li:hover > a {
color: white;
background-color: #ec894d;
}
.main-menu ul li a {
font-family:"Lato", Helvetica, Arial, sans-serif;
color: #afb4b5;
font-size: 14px;
display: block;
text-decoration: none;
padding: 14px 10px;
}
.main-menu ul li ul {
display: none;
background-color: #ec894d;
width: 220px;
padding: 0;
position: absolute;
top: 48px;
left: 0;
z-index: 888;
}
.main-menu ul li ul li {
float: none;
margin: 0;
}
.main-menu ul li ul li:hover > a {
background-color: #dc7d44;
}
.main-menu ul li ul li a {
font-size: 13px;
padding: 10px 10px 12px;
color: white;
}
.main-menu ul li ul li ul {
background-color: #dc7d44;
top: 0px;
left: 220px;
}
.main-menu ul li ul li ul li:hover > a {
background-color: #d0743d;
}
.main-menu .responsive-nav {
display: none;
margin: 0px auto;
width: 100%;
padding: 5px;
}
I tried to change them as you can see above in CSS, but without any success
In default they looked like this:
Menu-and-contact-wrap looked like this
position: absolute;
bottom: 0;
right: 0;
And Main-menu looked like this before
margin-top: 42px;
float: right;
Thank you!
There are a few ways. Here are two.
Set a non-100% width on .main-menu and then add margin: 0 auto
Remove the floats from .main-menu ul li, add display: inline-block to it and add text-align: center to .main-menu