I am new to Hexo and wondering if there is a way of adding an a:active state to a nav item of the current page?
HTML...
<nav>
<ul>
<li>
INDEX
</li>
</ul>
<nav>
CSS...
a:active {
color:green;
}
First of all - the a:active is not meant to be set by the server - the :active pseudo-class means that the element has been activated by user - read more in the documentation
What you really want here is an anchor tag marked by a regular class when its href equals to the currently visited URL. In Hexo, you can do it by using the is_active helper:
Thus, your code may look like this (adding additional is-active class to anchor when it
is the current page):
<nav>
<ul>
<li>
INDEX
</li>
</ul>
<nav>
CSS:
a.is-active {
color:green;
}
Related
I've just started working with jQuery UI, and while at first it looked like a wonderful tool, I've found that it lacks exactly what I need: a menu button widget.
What I want is the functionality of the jQuery UI Menu Widget, but with some additional bits, primarily a button/clickable area that will show/hide the menu. This alone is simple enough, but what is driving me mad is adding the expected keyboard functionality to this. When a button expands a menu, one expects that clicking outside that menu or pressing ESCAPE will close that menu, and while this works for the widget's submenus, it isn't built into the main widget.
I've been reading about the Widget Factory and extending/modifying widgets, but I'm completely lost as to how to accomplish this specific problem, and I can't seem to find any answers to this that aren't many years old. I've even tried overriding the "collapse" function in the menu instance, but the problem is that I don't quite understand the flow of the code. I basically added an 'else' statement that calls the 'click' event on the button when the conditions for closing a submenu aren't met. This just creates all sorts of weird bugs and I know I don't really have any idea what I'm doing.
A code example of how this is done would be greatly appreciated, but this is a common enough website behavior that I imagine someone has already put this together. I'm just not finding anything up to date.
Thank you in advance!
If you do not find a Widget that is needed, you can combine various elements and use them together.
$(function() {
$(".widget button").button();
$(".widget button").click(function(event) {
event.preventDefault();
if ($("#menu").is(":visible")) {
$("#menu").hide();
} else {
$("#menu").show().menu("focus", null, $("#menu .ui-menu-item:first"));
}
});
$("#menu").menu({
select: function(e, ui) {
console.log(ui.item.text().trim());
}
}).hide();
});
.ui-menu {
width: 150px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="widget">
<h1>Widget Buttons</h1>
<button>A button element</button>
<ul id="menu">
<li class="ui-state-disabled">
<div>Toys (n/a)</div>
</li>
<li>
<div>Books</div>
</li>
<li>
<div>Clothing</div>
</li>
<li>
<div>Electronics</div>
<ul>
<li class="ui-state-disabled">
<div>Home Entertainment</div>
</li>
<li>
<div>Car Hifi</div>
</li>
<li>
<div>Utilities</div>
</li>
</ul>
</li>
<li>
<div>Movies</div>
</li>
<li>
<div>Music</div>
<ul>
<li>
<div>Rock</div>
<ul>
<li>
<div>Alternative</div>
</li>
<li>
<div>Classic</div>
</li>
</ul>
</li>
<li>
<div>Jazz</div>
<ul>
<li>
<div>Freejazz</div>
</li>
<li>
<div>Big Band</div>
</li>
<li>
<div>Modern</div>
</li>
</ul>
</li>
<li>
<div>Pop</div>
</li>
</ul>
</li>
<li class="ui-state-disabled">
<div>Specials (n/a)</div>
</li>
</ul>
</div>
Base Examples:
https://jqueryui.com/menu/
https://jqueryui.com/button/
You can also make use of the Widget Factory to create your own.
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
I have a default internet application template from MVC4 and I would like to add some links to the <nav> tag depending on the user logged in.
I.e all the users have a default navigation panel, but if it is an admin logged in, he should have extra link for Managing product stock.
Right now it looks like that(from _Layout.cshtml):
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Browse", "Product")</li>
...
</ul>
</nav>
And I need somehow insert new ActionLink. I've tried to make an if statement inside the default layout, but it does not work. How could I add an extra <li> tag inside this <nav>? I am not familiar with JavaScript or JQuery, but can it be done using MVC features?
Yes this can be achieved using the razor syntax
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Browse", "Product")</li>
#if( User.IsInRole("Admin") ){
<li>#Html.ActionLink("Admin", "...", "...")</li>
}
</ul>
</nav>
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.