Css for formatting right-justified hamburger menu
Hello, I am trying to create a title bar with hamburger menu on the far right of the display. So far I've only been able to get the menu to be the width of the hamburger menu header (50px). Can you advise on how to keep the hamburger icon on the far right, but make the menu container the width of its items & submenu items, expanding to the left? Here's a simple example of the title bar layout I'm looking for:
<div class="d-flex justify-content-between">
<div class="d-flex">Title Text</div>
<div class="d-flex">
<SfMenu
TValue="DataModel"
Items="@menuItems"
HamburgerMode="true"
ShowItemOnClick="true"
Title="">
</SfMenu>
</div>
</div>
@code
{
private List<DataModel> menuItems = new List<DataModel>
{
new DataModel { Id = "parent1", Text = "Appliances" },
new DataModel { Id = "parent2", Text = "Accessories" },
new DataModel { Id = "parent6", Text = "Kitchen", ParentId = "parent1" },
new DataModel { Id = "parent7", Text = "Washing Machine", ParentId = "parent1" },
new DataModel { Id = "parent8", Text = "Air Conditioners", ParentId = "parent1" }
};
private class DataModel
{
public string? Text { get; set; }
public string? Id { get; set; }
public string? ParentId { get; set; }
}
}
Checking back. Any advice?
|
<style>
.e-menu-container.e-hamburger .e-menu-header:not(.e-vertical){
margin-left : 200px;
}
</style> |
Gayathri, thank you for your reply. Your solution does make the menu items appear as I would like them to. I'm using a hamburger primarily for phone use and need the div containing the hamburger icon to be as narrow as possible (50 px in the original code). Is there a way to have the menu items appear as your solution does but keep the hamburger icon div width unchanged? Thanks again.
|
<style>
.e-menu-container.e-hamburger{
min-width: 120px;
}
.e-menu-container.e-hamburger .e-menu-header .e-menu-icon{
float:right;
}
</style> |
Gayathri, thank you for taking the effort to help me with my problem. I successfully downloaded and ran your sample. It shows the menu items as I would like however I need the <div> for the hamburger icon itself to be as narrow as possible because I will be putting things like title text and an Edit switch across the top row on a small screen. Please see the attached sketch for example. Is there a way to get the hamburger <div> narrow while keeping the menu dropdown wide enough for the menu and submenu items? Thank you.
Attachment: 20220218_0956_5bffcc5.zip
Gayathri, Just checking back in on this. Any suggestions or solutions? Thanks.
|
<SfDropDownButton CssClass="e-small e-caret-hide e-hamburger-menu" IconCss="e-icons e-menu-icon" IconPosition="SplitButtonIconPosition.Top">
<PopupContent>
<SfMenu TValue="DataModel" Items="@menuItems" HamburgerMode="true" ShowItemOnClick="true" Title="" @ref="MenuObj"> </SfMenu>
<DropDownButtonEvents Opened="OnOpen" ></DropDownButtonEvents>
</PopupContent>
</SfDropDownButton>
@code
{ public async Task OnOpen()
{
await MenuObj.Open();
}
}
<style>
.e-menu-container.e-hamburger .e-menu-header:not(.e-vertical){
display: none !important;
}
.e-hamburger-menu .e-menu-icon::before{
content:'\e7cd';
color:black;
}
.e-dropdown-popup{
margin: 0px -170px;
}
.e-menu-container.e-hamburger ul.e-menu:not(.e-vertical){
width:200px !important;
}
.e-small.e-btn.e-top-icon-btn{
line-height: 1;
padding: 0px;
width: 20px;
background: white;
}
</style> |
Gayathri, your solution works. Thanks for taking the time to help on this.
UPDATE: after switching over from Syncfusion.Blazor NuGet package to individual NuGet packages (Navigations and SplitButtons) and bootstrap5, the sample provided above no longer works. No menu popup appears when the hamburger icon is clicked. Can you recommend how to change the code for these recent changes? Thank you.
Hi Dave,
We have checked your reported query and prepared the sample based on your requirement. please refer the below attached sample file and below UG link for referring the individual packages.
UG link: https://blazor.syncfusion.com/documentation/common/adding-script-references, https://blazor.syncfusion.com/documentation/appearance/themes
Please get back to us, if you need any further assistance on this.
Regards,
YuvanShankar A
Attachment: Server5.020_31270523.zip
Thank you, your updated sample file provided the guidance I needed.
Question: If I decide to use static web assets referencing the individual packages, instead of CDN, can you provide a reference for all of the script names for all components? I see that https://blazor.syncfusion.com/documentation/common/adding-script-references has many script names however there are some I could not find, such as for radio button. It would even be better if you had a file containing all of the script references to copy and paste directly into _Host or _Layout files.
Hi Dave,
Sorry for the delay. We have prepared the file with all components script of Syncfusion. And there is no script reference for button (button, radio-button, switch and checkbox) package component, it will run with Syncfusion.blazor.buttons along. Please find the below attachment and get back to us, if you need any further assistance on this.
Regards,
YuvanShankar A
Attachment: Script_3624a2ef.zip
Thank you very much. I imagine this file would be a handy download in your "Adding Script References" documentation.
Hi Dave,
You're welcome. We have already documented the details in the below documentation.
Please get back to us, if you need any further assistance on this.
Regards,
YuvanShankar A
- 16 Replies
- 3 Participants
-
DA Dave
- Feb 7, 2022 08:54 PM UTC
- Sep 27, 2022 04:31 AM UTC
