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;
}
Related
I'm currently setting up a sidebar menu for my Wordpress website. I'm running into 2 issues. The 1st one is that the text in the menu isn't lining up to the left side properly. I have tried to use the text-align attribute but it doesn't work.
The 2nd problem is that there is a bit of random space at the bottom of the menu that I don't know why is there.
Problem is happening here: http://dreamedbig.com/our-services/
My HTML/PHP:
<div class="page-content">
<div id="services-menu" class="services-sidebar">
<?php dynamic_sidebar('services'); ?>
</div>
</div>
The CSS:
#services-menu {
border: 1px solid black;
align-items: left;
float:left;
height: auto;
display: inline-block;
top:0;
left:0;
background-color: #BCE6FB;
}
#services-menu li{
list-style-type:none;
border-bottom: 1px solid black;
}
#services-menu a {
text-decoration: none;
color: #08203D;
}
#services-menu ul {
}
#services-menu ul li a {
position: relative;
display: block;
box-sizing: border-box;
z-index: 1;
margin: 5px;
padding-left: 5px;
padding-right: 5px;
}
#services-menu ul li a::after
{
content: "";
position: absolute;
top:0;
left: 0;
background-color: #00A2DA;
width: 0%;
height: 100%;
transition: all 1s;
z-index: -1;
}
#services-menu ul li a:hover::after
{
width: 100%;
}
#services-menu ul li:nth-child(odd) a::after
{
background-color: #00A2DA;
}
#services-menu ul li:nth-child(even) a::after
{
background-color: #FFFFFF;
}
It looks like you have some inherited styles from classes called .widget and there is margin and padding added to ul. This is common is your using something like WordPress or underscores that come with some stylesheets.
I think these styles will correct it
.widget, #services-menu ul{
margin:0;
padding:0;
}
I found the unwanted margin and padding by using inspect in my chrome browser. I highly recommend it for frontend styling because it makes troubleshooting these kinds of issue easier to resolve.
Here is an article to better explain how it works
Good day! I'm having a problem doing a responsive navigation bar coming from HTML, PHP, and CSS only. (No DIVS/Navbar) As you can see below in the OUTPUT image. WHen I used a mobile phone or resize my browser into smaller one. It will output my values like in the OUTPUT image. What I want is to when I use mobile or just make my browser smaller. There will be a button containing all the values and hwen its clicked. it will breakdown all my values like this. This is an example of my desired output. Please see my desired output
Here's my CSS
ul {
list-style: none;
padding: 0;
margin: 0;
background: #f8f8f8;
}
ul li {
display: block;
position: relative;
float: left;
background: #f8f8f8;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #000000;
}
ul li a:hover { background: #e4e3e3; }
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
li:hover a { background: #f8f8f8; }
li:hover li a:hover { background: #e4e3e3; }
.main-navigation li ul li {
color: black;
position: relative !important;
z-index: 9999 !important;
border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
Here's my HTML, PHP Code:
<?php
function get_menu_tree($parentID)
{
global $con;
$menu = "";
$sqlquery = " SELECT * FROM category where parentID='" .$parentID . "' ";
$res=mysqli_query($con,$sqlquery);
while($row=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
$menu .="<li><a href='base?page=post&categoryID=".$row['categoryID']."'>".$row['name']."</a>";
$menu .= "<ul>".get_menu_tree($row['categoryID'])."</ul>"; //call recursively
$menu .= "</li>";
}
return $menu;
}
?>
Here's how I call the function from my HTML code:
<div class="container">
<ul class="main-navigation">
<?php echo get_menu_tree(0); ?>
</ul>
</div>
</div>
This my DATABASE structure
This is my OUTPUT out of the following codes
I think the issue is that on desktop you are relying on the :hover to reveal the dropdown. For mobile there is no hover state and so you would need to either use JavaScript (or styled form checkboxes to simulate it with html/css) that would make it a tap to reveal sub items.
This would also mean that you would not be able to click through to the top level item on dropdowns as that would expand the dropdown rather than be a link. The work around could be to make a dropdown chevron on the right that would be it's own button to reveal the sub menu on mobile and the text still link through. This is the solution I used on https://www.firetechcamp.com/
Unfortunately, without adding at least some javascript, this is the closest i could get to a pure css / html solution:
try resizing the browser to see the responsive solution
ul {
list-style: none;
padding: 0;
margin: 0;
background: #f8f8f8;
font-family: Tahoma, Arial;
}
ul li {
display: block;
position: relative;
float: left;
background: #f8f8f8;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #000000;
}
ul li a:hover { background: #e4e3e3; }
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
#media( max-width: 600px ){
ul li{
float:none;
transition: all 0.3s ease forwards;
}
ul li a{
color: white;
}
ul>li:first-child{
background: #4caf50;
padding-right: 20px;
position: relative;
}
ul:hover li{
opacity: 1 !important;
position: relative !important;
z-index: 1 !important
}
ul>li:first-child:after{
content:"☰";
position: absolute;
top:0;
height: 100%;
right: 0;
margin: 0;
color: white;
background: #555555;
width: 50px;
font-size: 30px;
text-align: center;
line-height: 50px;
cursor: red;
}
ul>li:not(:first-child){
position: fixed;
z-index: -1;
background: #333333;
opacity: 0;
}
}
<ul>
<li>Home</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
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;
}
}
Disclaimer: I am sorry the post looks too big but I just thought I should provide all the details. I am sure the issue is something very stupid but I am not able to figure out :(
Background: I am creating a wordpress site using an awesome theme called Parallax from Access Press. I wanted to play out my business website before buying the pro version so decided to make a few changes myself.
Problem: You can either use the theme's menu (which allows animation and same page scroll; This Golum wantses) or use native wordpress menus (which does not allow scrolling; Golum hateses).
Workaround Tried: I figured I can go into the header.php and add one menu item manually. So following is the code per my understanding:
<nav id="site-navigation" class="main-navigation">
<div class="menu-toggle"><?php _e( 'Menu', 'accesspress_parallax' ); ?></div>
<?php
$sections = of_get_option('parallax_section');
if(of_get_option('enable_parallax') == 1 && of_get_option('enable_parallax_nav') == 1):
?>
<ul class="nav single-page-nav">
<?php
$home_text = of_get_option('home_text');
if(of_get_option('show_slider')== "yes" && !empty($home_text)) : ?>
<li class="current"><?php echo esc_attr($home_text); ?></li>
<?php endif;
if(!empty($sections)):
foreach ($sections as $single_sections):
if($single_sections['layout'] != "action_template" && $single_sections['layout'] != "blank_template" && $single_sections['layout'] != "googlemap_template" && !empty($single_sections['page'])) :
$title = get_the_title($single_sections['page']); ?>
<li><?php echo $title; ?></li>
<?php
endif;
endforeach;
endif; ?>
<li>Pre-order Here</li>
</ul>
<?php
else:
<some more code that picks custom menu if you choose to skip parallax menu>
</nav>
The first LI item just puts the text 'Home' in the page. Second one picks all the values from parallax menu. The Last LI item is the one I have included.
<li>Pre-order Here</li>
Behavior: This perfectly adds the item to the menu and also appears to be clickable. The problem is - when it is clicked, it does nothing. If I right click it and open in a new tab, it works perfectly fine. Including related CSS below for your reference
Edit: If I include a link to another section of the page. it works. Example: http://domain.com/#section-20
.main-navigation {
float: right;
max-width: 80%;
margin-top: 15px;
}
.logo-top .main-navigation{
float: none;
width: auto;
text-align: center;
max-width: none;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
display: inline-block;
}
.main-navigation ul li{
position: relative;
}
.main-navigation > ul > li {
float: left;
position: relative;
font-family: 'Oxygen', sans-serif;
font-weight: 400;
}
.main-navigation > ul > li > a{
text-transform: uppercase;
font-size:14px;
padding: 5px 15px;
}
.main-navigation > ul > li.current a{
color: #E66432;
}
.main-navigation a {
display: block;
text-decoration: none;
color:#333;
}
.main-navigation ul ul {
background: #FFF;
position: absolute;
top: 100%;
left:0;
z-index: 99999;
padding:0 10px;
font-size: 15px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
display: none;
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
min-width: 200px;
}
.main-navigation ul ul li {
border-bottom: 1px solid #EEE;
padding: 8px 0;
}
.main-navigation ul ul li:last-child{
border:none;
}
.main-navigation li:hover > a {
color: #E66432;
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
color: #E66432;
Thanks #pschueller and #dingo_d!!
You pushed me into the correct direction. The github to the JS plugin for scroll has the secret sauce.
I had to add a class='external' to my tag with the href and update the jquery.nav.js with the following:
Replaced
filter: '',
with
filter: ':not(.external)',
Can anyone suggest what might be the problem on my flickering menu bar?
Please suggest anything that will make the flickering of menu bar stop.
Thanks much!
#mainmenu{
margin-bottom: 2.5em;
}
.menubar{
position: fixed;
top:0;
left:0;
max-height:10em;
width:100%;
list-style: none;
background-color:#333333;
text-align: left;
margin:0;
padding: 0;
z-index: 1;
border-bottom: 1px solid #ccc;
}
.menubar .first {
margin-left: 1em;
}
.menubar li{
position: relative;
display: inline-block;
width:15em;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1em;
border-bottom: none;
cursor: pointer;
}
.menubar li:hover{
background-color:#6666ff;
}
.menubar a{
display: block;
padding: 0.5em 0.5em 0.5em 0.5em;
text-decoration: none;
color:#ffffff;
}
/* for submenus */
.menubar .first .submenubar {
padding: 0;
position: absolute;
top:2em;
left:0;
width:auto;
display: none;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.menubar li .submenubar li {
text-align: left;
list-style-type: none;
background-color:brown;
display: block;
color:#fff;
}
.menubar > li > .submenubar > li:hover {
background-color:black;
}
.menubar li:hover .submenubar{
display: block;
}
See this JsFiddle for my complete code.
I suspect that one of 2 things are happening.
Is the whole header "flickering" when you go to a new page? If so,
that's because you are building an html page from your php on the
server and then rendering the page again. Sometimes this will flash.
Sucks.
The sub-menu appears to "flicker" because it's broken and when you
try and hove over it, it disappears.
If it's 1, you can use caching to try and lessen the chances of this happening, or you can learn how to use ajax, or a js framework to build single page apps, but that's a lot of work.
If it's 2, then this code I'll include below, and this fiddle - will set you up with some more solid code to work with.
My real advice, is to just never use drop-down menus. They are a terrible interface pattern.
HTML
<nav class='container navigation'>
<div class='inner-w'>
<ul class='menu'>
<li>
<a href='#'>Top-level menu item 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-menu item 1</a></li>
<li><a href='#'>Sub-menu item 2</a></li>
<li><a href='#'>Sub-menu item 3</a></li>
<li><a href='#'>Sub-menu item 4</a></li>
</ul>
</li>
<li><a href='#'>Top-level menu item 2</a></li>
<li>
<a href='#'>Top-level menu item 3</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-menu item 1</a></li>
<li><a href='#'>Sub-menu item 2</a></li>
</ul>
</li>
<li><a href='#'>Top-level menu item 4</a></li>
</ul>
</div>
</nav>
CSS
/* global-structure */
.container {
width: 100%;
float: left;
}
.container .inner-w {
margin-right: auto; margin-left: auto;
max-width: 900px; /* arbitrary */
/* this should have a clear-fix */
}
/* menu styles */
.menu, .menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
}
.menu > li { /* just the top-level li */
position: relative;
/* so the sub-menu can be positioned to this */
border-right: 1px solid rgba(0,0,0,.3)
}
.menu > li:last-child {
border-right: 0;
}
.menu a {
display: block;
padding: .8rem .5rem;
background: #eee;
min-width: 160px;
color: inherit;
text-decoration: none;
}
.sub-menu {
position: absolute;
top: 100%;
left: 0;
height: 0;
width: 0; /* just hide it visually */
overflow: hidden;
z-index: 5; /* arbitrary, keep them small though... */
}
.sub-menu li {
clear: left;
border-bottom: 1px solid rgba(0,0,0,.3)
}
.sub-menu li:last-child {
border-bottom: 0;
}
.sub-menu a {
background: #ccc;
}
.sub-menu a:hover {
background: #aaa;
}
.menu > li:hover .sub-menu {
height: auto;
width: auto;
}
If I was absolutely forced to write a drop-down menu, It would have to be like this: http://codepen.io/sheriffderek/pen/qdBryb/?editors=010