I'm using Zend/Navigation in Zend Framework 2. It prints this:
<ul class="Navigation">
<li>
Home Page
</li>
<li>
Contact
</li>
</ul>
But i want to put a <span> element inside every <li> like this:
<ul class="Navigation">
<li>
<span>
Home Page
</span>
</li>
<li>
<span>
Contact
</span>
</li>
</ul>
Is there any way to do that without using a "partial" solution?
There's no other way, how to change html output from menu view helper (except indentation and <ul> class).
Well, of course, you can write your own menu view helper - extend Zend\View\Helper\Navigation\Menu and override htmlify method:
https://github.com/zendframework/zf2/blob/release-2.2.5/library/Zend/View/Helper/Navigation/Menu.php#L472,
but I think, partial template is much better and easier solution.
For anyone who is intrested this guy has created a helper doing this job. http://cmyker.blogspot.gr/2012/11/zend-framework-2-navigation-menu-to.html
Related
So moving over to MVC finally from web forms
so within my main _Layout.vbhtml I have a menu as follows:
<i class="material-icons">person</i> Account
<ul>
<li>Sign In / Sign Up</li>
<li>Profile Page</li>
<li>Orders List</li>
<li>Order Detail</li>
<li>Wishlist <span class="badge badge-primary badge-pill">3</span></li>
<li>Address</li>
</ul>
I want this to now come from the DB dynamically
in the web forms world this would have been a master page, I would have then added a literal and then populated it on the page load in the code behind.
But how do I archive the same now in MVC
ended up doing this in _layout.html, works but unsure if its the correct way :-)
#Code
Dim listGroups As List(Of ProductGroups) = ProductGroups.MenuList()
End Code
then further down the page:
<li>
<i class="material-icons">shopping_cart</i> Shop
<ul>
#For Each item In listGroups
#<li>#Html.DisplayFor(Function(modelItem) item.Group)</li>
Next
</ul>
</li>
as I said does what i expect but not sure if that's how your 'supposed' to do it?
I have partials which display in sidebar like below
__side_bar_partials.html.erb
<div class="col-sm-3">
<div class="account-left">
<ul>
<li class="active">Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
</div>
now what i need when i render this partial i want to add css class active added on selected menu
right now i render it with normal way
<%= render "profile_sidebar"%>
what i need to include in above code so it will add active class on selected menu
Basically you have 2 choices.
First one is to check the current page and highlight the right menu choice.
<div class="col-sm-3">
<div class="account-left">
<ul>
<li class="<%= 'active' if current_page?(menu1_path) %>">Menu1</li>
<li class="<%= 'active' if current_page?(menu2_path) %>">>Menu2</li>
<li class="<%= 'active' if current_page?(menu3_path) %>">>Menu3</li>
<li class="<%= 'active' if current_page?(menu4_path) %>">>Menu4</li>
<li class="<%= 'active' if current_page?(menu5_path) %>">>Menu5</li>
</ul>
</div>
</div>
But since you are looking for more elegant way, I would suggest second choice: doing a separate helper for your list elements. The solution with helper is perfectly described here.
Hope it helps.
I have a list, with 2 levels, being displayed like this in my vbhtml page:
<li>Contract Coverage:</li>
<li ng-repeat="(key, val) in orgSettings">
<label>{{key}}</label>
<ul>
<li ng-repeat="setting in val">{{setting.settingname}}</li>
</ul>
</li>
<li>
Line 3 represents an org, and multiple settings will be listed underneath (the ng-repeat in line 5).
I'd like to turn this display into a collapsible/expandable treeview at the Org level, so that the settings hide away and can be expanded to show underneath a specific org in the list if the user clicks on a the plus sign next to it.
Help please?
Simplest way I can think of it is:
<li ng-init="visible = {}">Contract Coverage:</li>
<li ng-repeat="(key, val) in orgSettings" ng-init="visible[key]=true" ng-click="visible[key]=!visible[key]" >
<label>{{key}}</label>
<ul ng-show="visible[key]">
<li ng-repeat="setting in val" >{{setting.settingname}}</li>
</ul>
</li>
<li>
See this plunker: http://plnkr.co/edit/vge0wqV590cCsofUZU05?p=preview
I have this code that is my navigation bar on my site, it is in my _layout.cshtml page at the top...
<div id="nav">
<ul>
<li id="current">Home</li>
<li>Code Stuff</li>
<li>Music Stuff</li>
<li>Blog</li>
<li>Links</li>
<li>Contact</li>
</ul>
</div>
Im using a razor view page and I need to be able to inject id="current" into the block for the page that im on. My solution was to do something like
<div id="nav">
<ul>
<li id="#Model.PageName">Home</li>
<li id="#Model.PageName">Code Stuff</li>
<li id="#Model.PageName">Music Stuff</li>
<li id="#Model.PageName">Blog</li>
<li id="#Model.PageName">Links</li>
<li id="#Model.PageName">Contact</li>
</ul>
</div>
But of course that wont work because all of the li items will have the pagename in. So without using burly if statements how can I do this dynamically?
First, you really should be using class (as indicated in your title) rather than id (as indicated in your question text). Second, I would define a function that takes an argument differentiated your link and outputs either the empty string or current depending on whether it matches the page name.
#functions
{
public string MenuClass( string menuItem )
{
return string.Equals( Model.PageName, menuItem, StringComparison.OrdinalIgnoreCase )
? "current"
: "";
}
}
<div id="nav">
<ul>
<li class="#MenuClass("Home")">Home</li>
<li class="#MenuClass("Code")">Code Stuff</li>
...
</ul>
</div>
What is the easiest way in rails to create a tabbed menu?
I was thinking about creating some if statements example:
<li class="<% if current.page = root_url %>currentpage<% end %>">Frontpage</li>
<ul id="submenu">
<li><b style="text-decoration:underline">Forside 1</b></li>
<li>Forside 45 </li>
</ul>
Here is my HTML for my menu:
<li>Frontpage</li>
<ul id="submenu">
<li><b style="text-decoration:underline">Forside 1</b></li>
<li>Forside 45 </li>
</ul>
<li>Frontpage 2</li>
<ul id="submenu">
<li><b style="text-decoration:underline">Forside 1</b></li>
<li>Forside 3 </li>
</ul>
<li>Frontpage 3</li>
<ul id="submenu">
<li><b style="text-decoration:underline">Forside 1</b></li>
<li>Forside 3 </li>
</ul>
I just want to style the current li element for the page. Example if a user is on Frontpage 2 the class currentpage is added to the li element for Frontpage 2 or if the user visit a subpage of Frontpage 2 it still have the class.
The easiest way would be using one gem instead of building it all from the ground up.
Take a look at this section of the ruby toolbox.
If your question is "how do I apply style to the menu", I suggest you create a different question, and tag it "CSS". You will probably get a lot of good answers. I particularly like how the twitter bootstrap css lib does its navigation/tabs.