Im trying to change the nav item in my ASP.Net MVC 4 project. I have found some examples but they dont work with the way the menu in need( See code):
<nav>
<ul>
<li>
<a href="/StartMenu/Index" class="current" title="Dashboard">
<i class="icon-map-marker"></i>
Dashboard
</a>
</li>
<li>
<a href="/StartMenu/Forms" title="Forms Stuff">
<i class="icon-edit"></i>
Forms Stuff
</a>
</li>
If all you're trying to do is make sure the last link that was clicked has class="current" you can do this
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
})
Related
I am trying to align a button properly as a secondary content within a collection. However, no matter what I try, I cannot get the button centered. See image below:
Current Layout
Code snippet:
<div class="section">
<ul class="collection with-header">
<li class="collection-header">
<h5>Drawing basics</h5>
</li>
<li class="collection-item">
<div>Public Policy and the Community<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
<li class="collection-item">
<div> Introduction to Geology Studies
<button class="btn waves-effect waves-light right"> Create
</button>
</div>
</li>
<li class="collection-item">
<div> Global Perspective<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
</ul>
</div>
What can I do to solve this? I've tried almost everything.
Well I couldn't get it to work as I'd like to but it works with this hardcode....
.fix{
float: right;
margin-top: -8px;
}
https://jsfiddle.net/ggcewqaL/2/
Maybe this answer is a bit late but here is the fix without the need for an additional CSS class.
<ul class="collection with-header">
<li class="collection-header"><h4>Drawing basics</h4></li>
<li class="collection-item"><div>Public Policy and the Community<i class="">remove_red_eye</i></div></li>
<li class="collection-item">
<div>Introduction to Geology Studies
Create
</a>
</div>
</li>
<li class="collection-item"><div>Global Perspective<i class="material-icons">remove_red_eye</i></div></li>
</ul>
I just added an anchor tag inside the second div and styled it with .btn class
Create
I hope this would be helpful for someone at least!
I have a drop-down menu in a Shopify site I'm creating.
On desktop, the main li is clickable to a link, as well as opening the sub-menu items when hovered.
On mobile, the main li ONLY opens the sub-menu "drawer", but can't be selected as a link on its own.
How can I make it selectable and open the drawer on mobile?
li a {
display: block;
padding: 7px 10px !important;
text-align: left !important;
}
<li class="site-nav--has-dropdown site-nav--active" aria-haspopup="true">
<a href="/" class="site-nav__link">
Home
<span class="icon icon-arrow-down" aria-hidden="true"></span>
</a>
<ul class="site-nav__dropdown">
<div>
<li>
ABOUT
</li>
<li>
PLANS & PRICING
</li>
<li>
POLICIES
</li>
<li>
CENTER
</li>
<li>
BACK
</li>
<li>
FAQ
</li>
<li>
OUR TEACHERS
</li>
</div>
<span class="arrow"> </span>
</ul>
</li>
Include the main li link as the first item in the sub-menu (in addition to the link in the main menu).
Display it on mobile devices.
Hide it with display: none on desktop devices.
I have a page with a list of anchors that is displayed in a vertical list. Upon clicking a certain one I am opening a partial view with another list of li items, but specifically changed to be inline. Only problem is that when the partial view is displayed the main view list of items changes to inline as well. Is there anyway around this?
Main page portion;
<ul>
<li>
<a href="" onclick="return OpenAdminPage('user');" >User Maintenance</a>
</li>
<li>
<a href="" onclick="return OpenAdminPage('role');" >Role Maintenance</a>
</li>
<li>
<a href="" onclick="return OpenAdminPage('type');" >Item Type Maintenance</a>
</li>
<li>
<a href="" onclick="return OpenAdminPage('tran');" >Transaction Type Maintenance</a>
</li>
<li>
<a href="" onclick="return OpenAdminPage('inven');" >Inventory Control Maintenance</a>
</li>
</ul>
partial view:
<ul>
#if (Model != null)
{
#Html.HiddenFor(x=>x.InventoryRoleCode)
for (var rolcnt = 0; rolcnt < Model.Roles.Count(); rolcnt++)
{
<li style="color:black;font-size:x-small">
#Html.DisplayTextFor(x => x.Roles[rolcnt].ItemTypeCode)
#Html.HiddenFor(x => x.Roles[rolcnt].ItemTypeCode)
</li>
<li>
#Html.CheckBoxForWithTitle(x=>x.Roles[rolcnt].Included)
</li>
}
}
</ul>
<style>
ul li
{
display: inline-block;
}
</style>
This is the a litle piece from a menu:
<li>Some Text
Now I want that after SOME TEXT to be 1 2 3 and when I click 1 2 3 to link me to another link, it has to be inside the >Some Text </a>.
Some ideas?
I'm not sure if that's what you are searching for:
<ul id="mega-menu-1" class="mega-menu">
<li>Products
<ul>
<li>Vehicles
<ul>
<li><a id="in_a_row" href="#">Coupe
<div class="cars">
<a class="car" href="#">1</a>
<a class="car" href="#">2</a>
<a class="car" href="#">3</a>
</div>
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
For styling of the elements you can use this CSS code:
.cars,
.car,
#in_a_row
{
display: inline !important;
}
Use !important to overwrite styles which have been defined by the plugins CSS file.
Here you can grab the source code. Just replace the index.html of the plugin with that code.
I'm trying to create a simple thumbnail list, the code is pretty much copied off jqm docs pages. However, when I use the code below the button element of the list isn't anchored to the left of the list item and instead appears centered...Can anyone help me? It's driving me crazy!
I haven't got any styles in other than what is in the jquerymobile default page template
<div id="listDiv" class="ui-content" data-role="main">
<div id="listInformation" data-role="content-primary">
<ul id="swipeMeChildrenList" data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="index.html" class="ui-link-inherit">
<img src="images/album-p.jpg" class="ui-li-thumb">
<p>Ha</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
</div>
What code do you use to generate your list from? A simple list will be specified like this:
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/album-p.jpg" />Ha
</a>
</li>
</ul>
jQuery Mobile will take care of adding all the necessary classes depending on the platform.
I suggest opening a new document and using the defaults from that page, ie
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
</ul>
Then if that works, piece by piece replace the code with yours until it breaks, that should isolate the issue.