I want to make a dynamic menu that :
Show their respective
<li>
without showing their children.
When doing hover
on either <li>
parent show the<ul> + <li> hijos
Obtaining the data
$var
orstrings
brought from abase de datos
In the database, I have:
A table for " brands " and a table for " products "
which I use to filter the search by brand or by %LIKE
.
<li>Placas de video</li>
click/hover
> MSI / GEFORCE etc..click
>> leads to a search with LIKE %msi%
(without hover
since nothing needs to be displayed)Table marcas
:
CREATE TABLE `marcas` (
`id_marca` int(50) NOT NULL,
`marca` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
ALTER TABLE `marcas`
ADD PRIMARY KEY (`id_marca`),
ADD UNIQUE KEY `id_marca` (`id_marca`);
Table productos
:
CREATE TABLE `productos` (
`id_producto` int(50) NOT NULL,
`codigo_p` varchar(50) NOT NULL,
`id_marca` int(50) NOT NULL,
`nombre` varchar(100) DEFAULT NULL,
`presentacion` varchar(100) DEFAULT NULL,
`precio` decimal(7,2) DEFAULT NULL,
`iva` decimal(7,2) NOT NULL DEFAULT 0.21,
`ivatotal` decimal(7,2) DEFAULT NULL,
`preciototal` decimal(7,2) DEFAULT NULL,
`tags` varchar(200) DEFAULT NULL,
`foto` varchar(50) DEFAULT NULL,
`descripcion` text NOT NULL,
`stock` varchar(2) NOT NULL DEFAULT 'Si'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
// Indices de la tabla `productos`
ALTER TABLE `productos`
ADD PRIMARY KEY (`id_producto`),
ADD UNIQUE KEY `id_producto` (`id_producto`),
ADD KEY `codigo_p` (`codigo_p`),
ADD KEY `ps_marcas` (`id_marca`),
ADD KEY `ps_tags` (`tags`);
---
ALTER TABLE `productos`
MODIFY `id_producto` int(50) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;
// Exportado con PHPMYADMIN (xampp/localhost)
What would be the best way to elaborate the multilevel menu with data from the DB using PHP?
Clarification:
These "parents" and "children" have ties to "products" . Which were shown when clicking or entering a category or subcategory
I am using bootstrap so the HTML
for the item(s) will be:
<li class="nav-item">
You could create a table called "menu" with the following structure:
Then we insert some example values:
I explain one by one the fields of the table:
menu_id: It is an autoincremental that will differentiate each element of the menu table
menu_name: It is the name that the user will see inside the menu. Example: Pendrive->Kingston->8GB (both pendrive and kingston and 8GB are the names that the multilevel menu will show)
id_padre: It is the key for the menu to become dynamic. This field will indicate whether or not the record in question is a "child" of some other record present in the menu table.
A) By default, to show the elements that make up the root of the menu (level 1), the id_padre must be set to "0"
B) If we have for example the record
(4, 'Kingston', 1, 'pendrives/kingston', '1'),
we see that the parent_id is "1" this means that "Kingston" is the son of "Pendrive" whose parent_id is precisely "1". Likewise for the rest of the table.link: It is the address of the form or of the "view" that you will show when the user clicks on a specific name in the menu.
status: It will have value "0" or "1". If it is inactive it will be "0" (it is not seen by the user for any particular purpose) if it is active (it can be seen by the user) it is "1"
Regarding the php associated with creating the menu dynamically, we have the following:
The above function is to generate the menu dynamically with a recursive method based on the parent_id. You add this function where you have your other functions and simply call it in the view where you want to generate the menu as follows:
Note: We always pass parameter "0" to the function so that it generates the menu from the first level or the base, which are those elements that do not have parents or can also be called root elements.
I was curious if it existed since I had never seen such behavior. I thought of doing it but W3school already had it done so I publish it for you:
What this does is apply the relative position to the children of the children of the dropdowns and move them 100% to the left so they don't overlap. The jquery does a toggle on whether to show/hide the ul grandchild. Remember that you have to add the css classes that are explicit for it to work for you.