I have bootstrap multilevel drop down navbar. when I click on the button I want the sub menu to drop right side of the list but it is overlapping last option. can anyone suggest me how to do it?
<ul class="nav navbar-nav col-lg-4">
<li class="active dropdown yamm-fw">
Home
</li>
<li class="dropdown"><a class="dropdown-toggle" data-hover="dropdown"
href="#"> category <span class="caret"></span> </a>
<ul class="dropdown-menu dropright">
<?php $sql=mysqli_query($con,"select id,categoryName from category
limit 10");
while($row=mysqli_fetch_array($sql))
{
$category_name=$row['categoryName'];
if ( $category_name == "Clothing")
{ ?>
<li class="dropdown yamm btn-group">
<a class="dropdown-toggle " data-toggle="dropdown" href="#"> <?php echo
$category_name; ?><span class="caret"></span></a>
<ul class="dropdown-menu dropright">
<?php $sql1=mysqli_query($con,"select id,subcategory from subcategory1
where categoryid=" .$row['id']);
while($row1=mysqli_fetch_array($sql1))
{ ?>
<li class="dropdown yamm">
<a href="category.php?cid=<?php echo $row1['id'];?>"> <?php echo
$row1['subcategory'];?></a>
</li>
<?php } ?>
</ul>
</li>
<?php }
else
{ ?>
<li class="dropdown yamm">
<a href="category.php?cid=<?php echo $row['id'];?>"> <?php echo
$row['categoryName'];?></a>
</li>
<?php
}
} ?>
</ul>
You may overcome this problem by writing the CSS the value of paddings.
.nav li {padding-top: 5px; padding-bottom: 5px;}
Also, have look at line-height property it might be create some problem. on some cases.
Related
I seem to be having difficulty with creating (or styling at least) a multilevel dropdown for my categories using bootstrap 5.
What I'm trying to do is:
Dresses
-- Winter
-- Summer
-- Etc
So essentially sub categories under the parent categories.
My navbar code is:
<!-- nav bar -->
<ul class="nav nav-pills ms-auto">
<li class="nav-item">Home</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Browse By Category</a>
<ul class="dropdown-menu">
<?php $categories = DB::getInstance()->select("SELECT * FROM `categories` ORDER BY `category_name` ASC"); ?>
<?php foreach ($categories as $category) { ?>
<?php $subcategories = DB::getInstance()->select("SELECT * FROM `categories_sub` WHERE `categories_sub_id_main`={$category['category_id']} ORDER BY `categories_sub_name` ASC") ?>
<li>
<a class="dropdown-item" href="<?= urlFull(); ?>category.php?categoryId=<?= $category['category_id']; ?>"><?= $category['category_name']; ?><?php if (count($subcategories)) { echo " ยป"; } ?></a>
<?php if (count($subcategories)) { ?>
<?php foreach ($subcategories as $subcategory) { ?>
-- <?= $subcategory['categories_sub_name'] ?>
<li class="dropend">
<ul class="dropdown-menu dropdown-submenu shadow">
<li><a class="dropdown-item" href="javascript:void()"><?= $subcategory['categories_sub_name'] ?></a></li>
</ul>
</li>
<?php } ?>
<?php } ?>
</li>
<?php } ?>
</ul>
</li>
<li class="nav-item"><span class="text-danger"><strong>SALE</strong></span></li>
<li class="nav-item">FAQ</li>
<li class="nav-item">Contact</li>
</ul>
I thought this would be easier to implement using bootstrap as there are usually lots of examples, my PHP code is right, it loops the subcategories out under the main ones, it seems to be the styling I'm having issues with.
The sub categories should not appear until they are hovered over, from reading up i need to use a dropend class at one point I know that much from reading up, an example of the issue can be seen on: https://www.sapphire-wave.com/.
I think I'm on the right path, any help on how to fix the issue would be great.
I'm trying to view submenu after click on parent.
Classes->Primary School->(Grade1,Grade2,Grade3,Grade4,Grade5,Grade6)
Classes->Middle School->(Grade7,Grade8,Grade9)
Classes->Secondary School->(Grade10,Grade11,Grade12)
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="nav navbar-nav navbar-right">
<?php foreach ($data as $menu) { ?>
<?php if(!$menu->children) { ?>
<li><?php echo $menu->name; ?></li>
<?php }
else {
?>
<li class="dropdown open">
<a href="#" class="dropdown-toggle " data-toggle="dropdown">
<?php echo $menu->name; ?>
<span class="fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu open" role="menu">
<?php
foreach ($menu->children as $child) {
?>
<li><?php echo $child->name; ?></li>
<?php
foreach ($child->children as $sub_child) {
?>
<li class="dropdown-submenu">
<?php echo $sub_child->name; ?><span class="fa fa-angle-down"></span>
<ul class="dropdown-submenu" role="menu">
<?php } ?>
<?php } ?>
</ul>
</li>
<?php } ?>
<?php } ?>
</ul>
</li>
</ul>
</div>
The result:
Problem with result
I want to view Grade 1 to Grade 6 after click on Primary school and from Grade 7 to Grade 9 after click on Middle school ...
Please help!
You have an open <ul class="dropdown-submenu" role="menu"> tag without any <li> or <a>'s being generated inside of it. Then you close two each statements before closing the <ul> tag.
<?php foreach ($child->children as $sub_child) { ?>
<li class="dropdown-submenu">
<a href="#" style="color:black;" class="dropdown-toggle " data-toggle="dropdown">
<?php echo $sub_child->name; ?><span class="fa fa-angle-down"></span>
</a>
<ul class="dropdown-submenu" role="menu">
<?php } ?>
<?php } ?>
</ul>
</li>
This will be causing all sorts of unintended markup output. Fix that and it should fix your problem. If not, you'll atleast be a lot closer.
I'm in the process on covering the navigation bar on all the pages to a global navigation with the PHP. I'm using PHP also to add a class and show the current page.
The challenge that I'm facing is the parent navigation selection. It's underlined when it's on the child page and the sub-nav is also selected. Such as I'm on the "History" page, child page to the "About Us" page. Both are underlined.
The challenge that I'm facing is when I move over to the next page, "Service Areas" or any of it's children, the "About Us" nav selection is still underline. I'm trying to use the || logic to prevent that from happening.
Below is the following code:
<li class="dropdown <?php if ($thisPage=='About Us'||'History'||'Mission Values'||'Process'||'Our People'||'Testimonials'||'Capstone Cares') echo 'active'; ?>">
Is there a way that I can deselect the parent nav when I'm under a different nav section?
Website is http://capstone.dgpehrson.com
Here is the rest of the code...
On individual pages I'm adding:
<?php $thisPage="About Us"; ?>
I'm changing the name according to the page.
Here is the Navigation code:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown <?php if ($thisPage=='About Us' || 'History' || 'Mission Values' || 'Process' || 'Our People' || 'Testimonials' || 'Capstone Cares') echo 'active'; ?>">
About Us<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li <?php if ($thisPage=="History") echo "class=\"active\""; ?>>History</li>
<li <?php if ($thisPage=="Mission Values") echo "class=\"active\""; ?>>Mission & Values</li>
<li <?php if ($thisPage=="Process") echo "class=\"active\""; ?>>Process</li>
<li <?php if ($thisPage=="Our People") echo "class=\"active\""; ?>>Our People</li>
<li <?php if ($thisPage=="Testimonials") echo "class=\"active\""; ?>>Testimonials</li>
<li <?php if ($thisPage=="Capstone Cares") echo "class=\"active\""; ?>>Capstone Cares</li>
</ul>
</li>
<li class="dropdown <?php if ($thisPage=='Service Areas'||'Apartments'||'Capital'||'Development Services'||'Manufactured Housing'||'Complimentary') echo 'active'; ?>">
Service Areas<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li <?php if ($thisPage=="Apartments") echo "class=\"active\""; ?>>Apartments</li>
<li <?php if ($thisPage=="Capital") echo "class=\"active\""; ?>>Capital</li>
<li <?php if ($thisPage=="Development Services") echo "class=\"active\""; ?>>Developement Services</li>
<li <?php if ($thisPage=="Manufactured Housing") echo "class=\"active\""; ?>>Manufactured Housing</li>
<li <?php if ($thisPage=="Complimentary") echo "class=\"active\""; ?>>Complimentary Value Analysis</li>
</ul>
</li>
<li class="dropdown">
Offerings<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li>Apartment</li>
<li>Manufactured Housing</li>
<li>Multi-family Land</li>
</ul>
</li>
<li class="dropdown">
Market Reports<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li>Florida</li>
<li>Kentucky</li>
<li>North Carolina</li>
<li>South Carolina</li>
<li>Tennessee</li>
<li>Virginia</li>
</ul>
</li>
<li>News</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
You have to have the compare between each 'or'. The string is just evaluating to a true.
if ($thisPage=='About Us'||$thisPage=='History'||$thisPage=='Mission Values'||$thisPage=='Process'||$thisPage=='Our People'||$thisPage=='Testimonials'||$thisPage=='Capstone Cares') echo 'active';
I use bootstrap theme bs-admin-bcore and I want to make menu in file "menu.php" to be more dynamic.
For example, I have this code :
<ul id="menu" class="collapse">
<li class="panel">
<a href="index.php" >
<i class="icon-table"></i> Dashboard
</a>
</li>
<li class="panel ">
<a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">
<i class="icon-tasks"> </i> UI Elements<span class="pull-right"><i class="icon-angle-left"></i></span> <span class="label label-default">10</span>
</a>
<ul class="collapse" id="component-nav">
<li class=""><i class="icon-angle-right"></i> Buttons </li>
</ul>
</li>
</ul>
when I call index.php <li class="panel"> becomes <li class="panel active"> and when I call button.php EU Elements becomes active.
You have to add "active" class to the parent li of buttons as well n it will work.
I'm trying to write a simple php script that will populate a drop down unordered list with the file contents of a directory. Specifically .wav files. I'm HTML using and Bootstrap to do so.
Here is the list I've been working on:
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<h4 style="color: #333333">Select a Sound -</h4> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Moose.wav</li>
<li>Duck.wav</li>
<li>Goose.wav</li>
</ul>
</li>
</ul>
<?php
foreach(glob('sounds/*.wav') as $filename){
$rest = substr($filename, 7);
echo "<option>".$rest."</option>";
}
?>
Right now it's populated with hard coded values, Moose, Duck, etc . . . I've been working on this php script, I just don't know how to combine the two.
Is this what you're looking for?
<ul>
<?php
foreach(glob('sounds/*.wav') as $filename){
$rest = substr($filename, 7);
echo "<li><a href='#'>".$rest."</a></li>";
}
?>
</ul>
I'm writing this based on the assumption that all the code you provided are working perfectly as intended.
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<h4 style="color: #333333">Select a Sound -</h4> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<?php foreach(glob('sounds/*.wav') as $filename){
$rest = substr($filename, 7);
echo "<li>".$rest."</li>";
}
?>
</ul>
</li>
</ul>
The idea is to write a PHP loop to generate your list items. This loop would reside within the tags, hence making the list.
You can use basename() to get only the filename, no need for substr()
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<h4 style="color: #333333">Select a Sound -</h4> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<?php foreach(glob('sounds/*.wav') as $filename):?>
<li><?php echo basename($filename);?></li>
<?php endforeach;?>
</ul>
</li>
</ul>