I am having a mega drop down menu with big icons against each menu item. Does the BOLT menu provides a URL option too where I could save the url of that icon and output that Img URL value in loop?
main:
- label: Home
title: This is the first menu item.
path: homepage
class: first
#imgurl: url <- SOMETHING LIKE THIS #
Using class is another option but i don't really want to use CSS pseudo selector here to add background image. Is there any other possibility?
just add the imgurl option to the config. In your template you can access it like item.imgurl.
When you look at the default menu implementation, you see that it iterates over the menu items where it calls a function that renders the menu item + any sub menus:
https://github.com/bolt/bolt/blob/release/3.0/app/theme_defaults/_sub_menu.twig#L40-L42
And as you can see in the following link, you just access the options defined on the menu entry.
https://github.com/bolt/bolt/blob/release/3.0/app/theme_defaults/_sub_menu.twig#L20-L22
Related
I have main menu in Voyager which has some items in it (navbar buttons).
I output all of the items in my blade view with
{{menu('main', 'bootstrap')}}
Problem is that all of the items (navbar buttons) have the same look to them.
I have custom classes for them in my style.css file but I could not find a way to style all the items differently.
Database menu does not provide a menu_items table where I could add my own classes either.
I figured out that you have to use {{menu('main', '_json')}} and afterwards you iterate each of the items in a foreach loop and do whatever you want with them.
There are various methods to do this:
Method 1: If you are using the bootstrap in that case you can use the below code inside your blade template. Make sure to change the FrontendMenu as per the menu name that you added in the backend.
{{ menu('FrontendMenu', 'bootstrap') }}
Method 2: If you want to add custom style and make more changes to the menu in that case you can follow the below steps.
Go to the path projectname\vendor\tcg\voyager\resources\views\menu
Copy the default.blade.php and paste it inside projectname\resources\views
And rename it as mymenu.blade.php
And change the menu code in template from {{ menu('FrontendMenu', 'bootstrap') }} to {{ menu('FrontendMenu', 'mymenu') }}
Then finally you can make any changes inside mymenu.blade.php that you want to do you can add class to ul, li and make changes in html as well.
Refrecen Video
I am working on one application which has top nav menu which is always there on all the page and there is one page called customer profile(http://localhost:4200/profile) on which i am displaying Account Info,Change Password,Address etc as a Side Menu and when user click any of the one say Change-Password then url will change to http://localhost:4200/profile/change-password and if clicked Address then url changes to http://localhost:4200/profile/address.
Side menu should always be there till user is at /profile and display content of that selected menu(like change password or address etc).
I read about the auxiliary routes but in that i see URL is change something to http://localhost:4200/profile/change-password(profile-sidebar:side-menu).
But i don't want this(profile-sidebar:side-menu) thing is the URL.
Is there any other alternative way in angular to achieve the same thing?
Thanks in advance.
You can add the side menu inside your root component and just display it if the route starts with '/profil' wich can be checked through the router service :
component ts
...
constructor(private router : Router){}
urlStartsWith(path : string) : boolean {
return this.router.url.startsWith(path) ;
}
component html
...
<app-side-menu *ngIf="urlStartsWith('/profil')"></app-side-menu>
...
'app-side-menu' is your side menu selector.
I am new to Angular. I am implementing a web project using mean stack and Angular 6. There I have to open a panel and there is a menu. I want to open different html views in different components when click menu items.
For example, I have a panel which contains the menu in the left side.This is in 'dash' component. In that menu there is a menu item called 'Maps'. When I click on menu item 'Maps' it should display the view of the html in 'maps.component.html' file. Here 'dash' and the 'maps' are two different components.
What I have tried.
Defined a booloan variable called 'isMap' in dash.component.ts file. Set its value as false at the begining.
Changed the variable's value to 'true' when item's title equals to 'Maps'
eg:
//Select the relavant view according to the selected menu item
onContecxtItemSelection(title) {
if (title == "Maps") {
this.isMaps=true;
}
}
Wrapped the html in maps.component.html using a div and set the 'isMap' variable using an '*ngIf'.
eg:
<div style="float: right; " *ngIf="isMaps">
<p>Map page</p>
</div>
My first question is,
When I click on the menu item it does not show the content of maps.component.html
Second question is,
'isMaps' variable in maps.component.html shows following error.
'[Angular] Identifier 'isMaps' is not defined. The component declaration, template variable declarations, and element references do not contain such a member'.
I tried importing the 'maps component' to 'dash.component.ts' file as well. But did not work. So I removed that part.
In my rails app I have a bootstrap nav menu with five items, each with a welcome/_____.html.erb document to which the menu item is linked (e.g. welcome/personality, welcome/game, etc.).
I put this as the link to the new page for the first menu item:
Know Your<br>Personality
And it works fine, but trying to click on the next menu item using the same href="welcome/game" link gives me an error message indicating it is trying to access welcome/welcome/game.
This is in my application.html.erb file, so it's not something I can change from page to page. Can anyone see a way to fix this issue?
You need to change your href to /welcome/personality. Notice the / in the front which tells your router to use the root_url and add what you have, otherwise it will keep adding /welcome/welcome/welcome...
I have a nav.shtml file in which I am setting a class on the current menu item as follows:
Faculty'>http://root/level1/level2/page.shtml">Faculty & Staff
This is fine for the top-level pages, but a few have subpages and I would like to be able to set the class on the top-level menu item if the current page is a subpage as well. E.g. There is a "Faculty/Staff" menu item which goes to an overview page, faculty.shtml, then there are some links on that page to individual faculty/staff pages in a subdirectory. If I'm looking at one of the individual subpages, I still want the class to get set on the "Faculty/Staff" menu item.
So, I need something like:
"if $DOCUMENT_URI=/level1/level2/page.shtml *or* if $DOCUMENT_URI=/level1/level2/level3/*.shtml".
I can't seem to figure out the correct syntax... Can anyone help me out?
The following should work for you, based on the example provided:
<!--#if expr="$DOCUMENT_URI = /\/level1\/level2\/page\.shtml/ || $DOCUMENT_URI = /\/level1\/level2\/level3\/.*.shtml/" -->