I have a User menu dropdown:
<ul class="dropdown-menu">
<li> Profile</li>
<li><span class="badge badge-success pull-right">5</span> Settings </li>
<li> Lock screen</li>
<li class="divider"></li>
#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
<li> Logout</li>
}
</ul>
Adding the #Html.BeginForm breaks the style of my dropdown.
Any clue on how can I avoid that for adding extra styling to my dropdown element?
Because you are putting a form that breaks your list layout, put the form inside the <li></li>
a list have to have layout
<ul>
<li></li>
</ul>
#html.beginform does actually render a form so your html will look like
<ul>
<li></li>
<form>
<li></li>
</form>
</ul>
so change to this
<ul class="dropdown-menu">
<li> Profile</li>
<li><span class="badge badge-success pull-right">5</span> Settings </li>
<li> Lock screen</li>
<li class="divider"></li>
<li> #using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
Logout
}
</li>
</ul>
Related
In the website I'm working on the navigation menu is made by several nested lists, when one element is clicked on the <li> element with the page name acquires the .active class, if it belongs to a nested list all parent li elements above also acquire the .active class.
I'd like to be able to style the last <li> element with class .active since it corresponds to the currently open webpage.
I'm working with Omeka s content management system, which means that I can't use javascript or modify the HTML files, so I'm looking for a solution in pure CSS.
here is the menu structure:
`
<ul class="">
<li >
Introduction
</li>
<li>
level 1
<ul>
<li>
subpage
<ul>
<li>
sub-subpage
<ul>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
here is when I'm on th page "sub-sub-page":
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
`
I've tried to use li.active:last-of-type but it only select the last element of type li.
ul *{
color : #000;
text-decoration: none
}
ul .active ul li ul li ul li a{
color : #f00;
font-weight : bold;
}
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
It appeared simpler than I first thought:
Given the current structure, from all nested active elements you need to select the li that only has an a element. To make it work in general (other than a list element) don't use the li element selector at all.
I added two differently nested examples in the snippet along with an ::after text...
.active > a:only-child { color: red }
.active > a:only-child::after { content: ' (active)' }
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li>
sub-sub-page
</li>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li>
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li class="active">
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li>
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
For whatever reason, my Materialize drop down menus won't drop on hover (they should be default).
<ul id="dropdown2" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
<ul id="dropdown1" class="dropdown-content">
<li>STRIPE FORMS</li>
<li>UPDATE FORMS</li>
</ul>
<ul id="dropdown4" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
<ul id="dropdown3" class="dropdown-content">
<li>STRIPE FORMS</li>
<li>UPDATE FORMS</li>
</ul>
<nav>
<div class="nav-wrapper">
ACCOUNTING
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down hlight">
<li>CHECK PAYMENT</li>
<li><a class="dropdown-button bold-only" href="#" data-activates="dropdown2">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button bold-only" href="#" data-activates="dropdown1">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
<li>REPORTS</li>
<li>CHARTS</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>CHECK PAYMENT</li>
<li><a class="dropdown-button" href="#" data-activates="dropdown4">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#" data-activates="dropdown3">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
<li>REPORTS</li>
<li>CHARTS</li>
</ul>
</div>
</nav>
I've got the dropdown initialized (I'm in Meteor so initializing would be inside an onRendered Template):
Template.myTemplate.onRendered(function() {
$(".dropdown-button").dropdown();
}
So my thought was to see if I could force it with some CSS (one of my weaknesses):
.nav-wrapper ul.hlight li:hover #dropdown2 {
display: block;
}
Arg. This is wrong. Can I force this in CSS if the default isn't working? Right now my version of Meteor is using jQuery 1.11
Classic approach do not work with Materialize CSS because it has its own JavaScript methods.
Define dropdown-button & dropdown-content in your template like:
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
Then on client-side JavaScript initiate it like:
Template.myTemplate.onRendered(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
}
Now on hover, it will drop because you defined: hover: true, // Activate on hover
I think you missed dropdown-button part.
For more information: http://materializecss.com/dropdown.html
I work on an asp net mvc 4 solution working (well) with Zurb foundation 4.
I have to update it to the version 5 of the framework (the current version offers by Zurb is 5.3).
No problem for the moment^^.
But I have an issue with the top bar element with this new version (and the same with sub-nav).
The top-bar appears on my page but the dropdown lists don't work, in full screen as in responsive.
I already check some topics on it and add the "famous" data-topbar on the nav class="top-bar" but it still doesn't work.
I suspect that we won't make the upgrade on the solution if i can't fixed this problem, so I cracked on it for many hours...
Here is a sample of my HTML:
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><i class="general foundicon-home"></i>TDB </h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
#if (Request.IsAuthenticated && (! ViewUtils.UtilisateurCourant.IsInfi()))
{
<li class="divider"></li>
<li class="#classMandats">Mandats</li>
<li class="divider"></li>
<li class="#classContacts">Contacts</li>
<li class="divider"></li>
}
#if (Request.IsAuthenticated && (ViewUtils.UtilisateurCourant.IsSuperAdmin() || ViewUtils.UtilisateurCourant.IsAdmin()))
{
<li class="#classAdmin">Administration
<ul class="dropdown">
#*<li><label>Actions</label></li>*#
<li>#*<img src="~/Areas/Admin/Content/Utilisateurs/icons/group.png" class="MenuIcon" />*#Utilisateurs</li>
<li class="divider"></li>
<li class="has-dropdown">#*<img src="~/Areas/Admin/Content/Utilisateurs/icons/services.png" class="MenuIcon" />*#Prospect / Client
<ul class="dropdown">
<li>Statuts</li>
<li>Perte</li>
<li>Origines</li>
</ul>
</li>
<li class="divider"></li>
<li>Import prospects ImmoInversé</li>
<li class="divider"></li>
#{
//string urlProspectsClient = string.Concat(ViewUtils.GetBaseUrlSiteWeb(), "/Areas/Admin/Content/ReportingService/RapportV2.aspx?rapport=1");
string urlProspectsClient = Url.Action("Index", "MarketingStats", new {area = "Admin"});
}
<li>Rapp. Prospects/Clients</li>
#if (Request.IsAuthenticated && ViewUtils.UtilisateurCourant.IsSuperAdmin())
{
<li class="divider"></li>
<li>Moteur</li>
<li class="divider"></li>
<li>Nettoyage de la base de données</li>
}
</ul>
</li>
<li class="divider"></li>
}
If someone can help me it will be nice.
Inside my asp.net mvc4 app I have menus which is stored inside Shared folder as partial view
like
<li class="menu-title">
<a class="title" href="#">Main menu</a>
</li>
<li class="submenu_items" style="display: list-item;">
<ul>
<li>
#Html.ActionLink("Index", "Index", "My Index")
</li>
<li>
#Html.ActionLink("About", "Index", "About")
</li>
</ul>
</li>
How can I send from controller some flag to the view where I would append css class to selected link, for example if visitor click first link (Index) when this page loads I want this menu partial to be
<li class="submenu_items" style="display: list-item;">
<ul>
<li>
#Html.ActionLink("Index", "Index", "My Index", new {#class="selected "})
</li>
<li>
#Html.ActionLink("About", "Index", "About")
</li>
</ul>
</li>
To highlight a selected menu, We can make use of custom Html helper, Scott has written an wonderful article on this check this link
http://odetocode.com/Blogs/scott/archive/2012/08/25/asp-net-mvc-highlight-current-link.aspx
I am experiencing an issue with bootstrap in IE. It relates to the .pull-right class with just floats the <div> to the right.
This is a visual demonstation:
Chrome 28
IE10
The menu is construted using KendoUI and my site uses Bootstrap v.2.3.2 RC2. I am not aware of any compatibility issues with IE10. This issue does NOT present itself with IE9 or below though which is strange.
Here is the code:
<div class="main-ui-nav">
<div class="container">
<ul id="menu">
<li>
Customer
<ul>
<li>Customer Details</li>
</ul>
</li>
<li>
Products
<ul>
<li>View Products</li>
</ul>
</li>
<li>
Sites
<ul>
<li>Add Site</li>
<li>View Registered Sites</li>
</ul>
</li>
<li>
Payments
<ul>
<li>Invoices</li>
<li>Agreements</li>
<li>History</li>
<li>Oustanding</li>
<li>Statements</li>
</ul>
</li>
<li>
Notes
<ul>
<li>Create Note</li>
<li>Amend</li>
<li>View</li>
</ul>
</li>
<li class="pull-right">
Session Options
<ul>
<li>Exit Account</li>
<li>Logout</li>
</ul>
</li>
<li class="pull-right">Creation Options
<ul>
<li>Create Payment</li>
<li>Create Note</li>
<li>Create Invoice</li>
</ul>
</li>
</ul>
</div>
</div>
Thanks for your help in advance.
JS FIDDLE : http://jsfiddle.net/davcpas123/QFdTN/8/embedded/result/
This issue was due the KendoUI overriding the standard .clearfix classes.
To fix this I added :
.clearfix {
clear:both;
}
to my ui-full.css file.