meta data for this page
Differences
This shows you the differences between two versions of the page.
| adding_the_cms-pro_menu [2022/12/10 15:34] – created sgraf | adding_the_cms-pro_menu [2022/12/10 16:09] (current) – sgraf | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | < | + | ====== Adding the CMSPro Menu ====== |
| + | |||
| + | < | ||
| + | |||
| + | So you would like to customise your Template navigation on your new template? It's very easy to do however as every navigation is different this time we'll show you how to do it step by step, and at the bottom of the page we'll have the default Bootstrap 4 navigation. | ||
| + | |||
| + | Find your navigation it should start with `<nav` | ||
| + | Example: `<nav class=" | ||
| + | |||
| + | ### Start | ||
| + | |||
| + | Time to set started, so after you've found the start of the navigation we need to find where the links are going: | ||
| + | |||
| + | Find: | ||
| + | |||
| + | <div class=" | ||
| + | |||
| + | This is the default section for the navigation. | ||
| + | After that we want to add the php code: | ||
| + | |||
| + | <?php | ||
| + | if(!empty($menu_items)){ | ||
| + | foreach ($menu_items as $item) if ($item-> | ||
| + | ?> | ||
| + | <?php } } ?> | ||
| + | |||
| + | This checks to see if the $menu_items has any links and then foreach one it will show the links. | ||
| + | ### So it should look like: | ||
| + | |||
| + | <ul class=" | ||
| + | <?php | ||
| + | if(!empty($menu_items)){ | ||
| + | foreach ($menu_items as $item) if ($item-> | ||
| + | ?> | ||
| + | <?php } } ?> | ||
| + | |||
| + | ### Now we should see links like: | ||
| + | |||
| + | < | ||
| + | < | ||
| + | |||
| + | We need to change this to add our own links so remove the others and keep a dropdown menu if you have one in the code that's the hardest bit as every template has a different way of doing them. | ||
| + | |||
| + | ### Now lets sort them links out: | ||
| + | |||
| + | You'll need to replace the `<a href="#"></ | ||
| + | |||
| + | <a href="<? | ||
| + | //<?php echo $this-> | ||
| + | }else{ | ||
| + | echo $item-> | ||
| + | } ?>" <?php if($item-> | ||
| + | </ | ||
| + | |||
| + | So this checks if the target is set to a New Tab, if it does NOT give it then it shows the full url of the hostname for Blesta (your website) and the language for the page (for multi-languages) and then the url for the link item. | ||
| + | It then checks if it HAS been set to a new tab to set the `target=" | ||
| + | |||
| + | So that's the way to do the Links, however if you have a dropdown menu, you'll need to do add the following... | ||
| + | |||
| + | ### So your current nav should look something like: | ||
| + | |||
| + | <ul class=" | ||
| + | <?php | ||
| + | if(!empty($menu_items)){ | ||
| + | foreach ($menu_items as $item) if ($item-> | ||
| + | ?> | ||
| + | < | ||
| + | <a href="<? | ||
| + | //<?php echo $this-> | ||
| + | }else{ | ||
| + | echo $item-> | ||
| + | } ?>" <?php if($item-> | ||
| + | </ | ||
| + | </ | ||
| + | <?php } } ?> | ||
| + | |||
| + | ### Drop-downs are really simple: | ||
| + | |||
| + | However they are all different so you need to do this around your dropdown, as you have a paid license feel free to open a ticket or live chat session or even on discord in the BlestaCMS Pro section. | ||
| + | |||
| + | Our example will be: | ||
| + | |||
| + | <div class=" | ||
| + | <a class=" | ||
| + | <a class=" | ||
| + | <a class=" | ||
| + | </ | ||
| + | |||
| + | Example from Bootstrap | ||
| + | So we now need to edit the dropdown menu by adding the php to only display the drop-downs when the menu item has child' | ||
| + | |||
| + | <?php | ||
| + | if (!empty($item-> | ||
| + | ?> | ||
| + | <div class=" | ||
| + | <a class=" | ||
| + | <a class=" | ||
| + | <a class=" | ||
| + | </ | ||
| + | <? | ||
| + | } | ||
| + | ?> | ||
| + | |||
| + | The php code checks if the $item has child' | ||
| + | So we have that sorted we now need to do the same as before the foreach for each item child like so: | ||
| + | |||
| + | <?php | ||
| + | if (!empty($item-> | ||
| + | ?> | ||
| + | <div class=" | ||
| + | <?php | ||
| + | foreach ($item-> | ||
| + | ?> | ||
| + | | ||
| + | Action | ||
| + | </ | ||
| + | <?php | ||
| + | } | ||
| + | ?> | ||
| + | </ | ||
| + | <? | ||
| + | } | ||
| + | ?> | ||
| + | |||
| + | So now we've got the foreach we can start doing the items like the above however we use $child not $item. | ||
| + | ### So we need to do as before: | ||
| + | |||
| + | <?php | ||
| + | if (!empty($item-> | ||
| + | ?> | ||
| + | <div class=" | ||
| + | <?php | ||
| + | foreach ($item-> | ||
| + | ?> | ||
| + | | ||
| + | //<?php echo $this-> | ||
| + | }else{ | ||
| + | echo $child-> | ||
| + | } ?>" <?php if($child-> | ||
| + | <?php echo $this-> | ||
| + | </ | ||
| + | <?php | ||
| + | } | ||
| + | ?> | ||
| + | </ | ||
| + | <? | ||
| + | } | ||
| + | ?> | ||
| + | |||
| + | And we have it done! | ||
| + | And there you have it, I need to work out a way to tidy that up but that's the principle. I have added the code below for the final Bootstrap 4 version. | ||
| + | |||
| + | ### Bootstrap 4 final version: | ||
| + | |||
| + | <nav class=" | ||
| + | <a class=" | ||
| + | <button class=" | ||
| + | <span class=" | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <ul class=" | ||
| + | <?php | ||
| + | if(!empty($menu_items)){ | ||
| + | foreach ($menu_items as $item) if ($item-> | ||
| + | ?> | ||
| + | <li class=" | ||
| + | <a class=" | ||
| + | <?php echo $this-> | ||
| + | <?php | ||
| + | if (!empty($item-> | ||
| + | ?> | ||
| + | <div class=" | ||
| + | <?php | ||
| + | foreach ($item-> | ||
| + | ?> | ||
| + | <a class=" | ||
| + | <? | ||
| + | </ | ||
| + | <?php | ||
| + | } | ||
| + | ?> | ||
| + | </ | ||
| + | <?php | ||
| + | } | ||
| + | ?> | ||
| + | </ | ||
| + | <?php | ||
| + | } | ||
| + | } | ||
| + | ?> | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | |||
| + | </ | ||