I'm new to Umbraco and I want to know how to add Home menu link to the navigation menu.
Below is the screenshot of the nav menu. I can't find an easy way to add the Home to the nav menu in Umbraco.
So I need to add Home before Learn, Explore, Extend and Contact
This is the solution that satisfied me.
I went to Settings -> Partial Views -> MainNavigation and added the html code below:
UPDATE:
Under this code <ul class="level-#naviLevel"> I added the code below:
#if (#CurrentPage.Name == "Home")
{
<li class="selected">Home</li>
} else {
<li>Home</li>
}
Related
I've been using the MasterPageDetail approach in creating a hamburger menu for my Xamarin Forms app. The menu itself works fine as taken from the Xamarin documentation https://developer.xamarin.com/samples/xamarin-forms/Navigation/MasterDetailPage/. What I noticed was that if I create a simple link to a page in one of my views, the hamburger menu and it's icon are replaced with a back button.
What I would like to know is how to create a link in a content page that will preseve my hamburger menu instead of showing a back button. Any link you click from the MasterPage takes you to the corrosponding view but you can still see the hamburger menu, if you click a link within one of the pages however you are taken to the page but with a back button instead. It's causing a very confusing navigational experience for my users.
The following code demonstrates how the manu is created in the hamburger menu just now.
public partial class MasterPage : ContentPage
{
public ListView ListView { get { return listView; } }
public MasterPage()
{
InitializeComponent();
//var master = new MasterPage();
var masterPageItems = new List<MasterPageItem>();
masterPageItems.Add(new MasterPageItem
{
Title = "Dashboard",
IconSource = "dashboard-icon-24.png",
TargetType = typeof(Dashboard)
});
listView.ItemsSource = masterPageItems;
}
So that works perfectly, you can navigate around and the hamburger menu is there all the time.
Within my view called 'dashboard' I added some link to hope to those same pages that are in my hamburger menu, I did so int he following way:
<Button Text="Information" Clicked="informationClick" />
The code for this is as follows:
private void informationClick(object sender, EventArgs e)
{
Navigation.PushAsync(new Information());
}
When you click on this link however you lose the hambuger menu and it's repalced with the back button instead. I want to preserve the hamburger menu, does anyone know how I can do this from my content page?
You must replace the "Detail" property of your MasterDetail page with a new NavigationPage containing the page you are linking.
Something like that:
(App.Current.MainPage as MasterDetailPage).Detail = new NavigationPage(new ContactsPage());
This is not really clean but it makes the idea.
I am very new to MVC hence maybe its a basic problem.
I have created a controller called HomeController which would have a view displaying a navigation panel which behaves like a menu but should always be visible as the folders in Windows Explorer. On clicking on an item, I want to load another view to the right hand side (similar to master detail). Each item has a view and a model. To load the navigation panel I have the following code
#foreach (var service in Model.Services)
{
#Html.ActionLink(service.Label, "Details", new { serviceName = service.ServiceName })
}
This code works fine but is code opens another view and my navigation list disappears. Please guide how to open my Details view along with the Home view
You need to use ajax to do this.
Split your page into 2 parts. The left - link container div and right preview div. When you click on a link, using ajax to call that link and update the DOM (preview div) of the same page.
<div>
<div class="pageLeftMenuContainer">
#foreach (var service in Model.Services)
{
#Html.ActionLink(service.Label, "Details",
new { serviceName = service.ServiceName },new { #class="ajaxLink"})
}
</div>
<div class="pageRight" id="preview"></div>
</div>
Now listen to the click event on the links with the css class ajax link and load the preview div. You can use jquery load() method.
$(function(){
$(".ajaxLink").click(function(e){
e.preventDefault(); // prevent the normal link click behavior
$("#preview").load($(this).attr("href"));
});
});
here is my code sir.
http://cssdesk.com/9cWbV
which should I take out or should I add I wanted it to display a text decoration when it is on the current page any advice or tips I'm noob I feel my code is rather messy
or it's best if you can advice me on highlight it on current page
I'm noob so dont flame me soo much :/
You can add a class to the navigation item and apply CSS for that class.
<li class="active">Home</li>
ul#navbar li.active a {
background-color: #cccccc;
}
Use PHP to add that class
define("THIS_PAGE", "home");
<li if(THIS_PAGE=="home"){ echo 'class="active"'; }>
Home
</li>
My question is how do i get the grails navigation plugin to show subItems?
I did a simple thing and added the following to top of my Controller:
class DummyController {
static navigation = [group: 'tabs',
title: 'dummy',
action: 'list',
subItems: ['create', 'save']
def create = {....
In main.gsp I added the following:
<head>
...
<nav:resources/>
</head>
<div id="menu">
<nav:render group="tabs"/><br/>
<nav:renderSubItems group="tabs"/>
</div>
Expecting this to work instead i get an exception:
Cannot invoke method toLowerCase() on null object
Jira has this bug filed and someone mentions adding:
if(!controllerName) return out
To the top of def renderSubItems function in NavigationTagLib.groovy which i have. It now no longer throws that error but my sub-menu items still dont display.
Any help on how to get the sub-menus displaying would be greatly appreicated
Thanks
It seems it did work, when a menu item is selected the new page loads and shows 'create' and 'save' underneath on the new page.
I misunderstood and was expecting the subitems to appear before i clicked on the menu button, or if i hovered over the menu button. I wanted to use the YUI css and let nav plugin do the hardwork but this is not the style of menu im after. I wanted a more dynamic menu i.e. you hover over a menu item and it shows a dropdown of subitems allowing you to go directly to an action much like the YUI menubar.
I'm using jQuery tabs and I'm having some problems. Let me detail them for you here and then I'll put code below:
PROBLEM 1:
I have a total of 6 tabs (default tab in local div, other 5 loading via Ajax). When the page loads, I need the 3rd tab to be selected by default. Easy. Problem is, say I link to http://example.com/index.html#services the 3rd tab still shows up instead of the services tab.
I've tried to use cookie to set the selected value but it just isn't working right.
PROBLEM 2:
This is major and I can't seem to figure it out. The 3rd tab is the default data and if I click on a tab to the right of that tab and come back everything is golden. BUT... If I click on a tab to the left of the 3rd tab (all tabs left or right of default are loaded via Ajax) and then click back to the 3rd tab the panel goes away completely and it's blank. Then, clicking on a different tab not only leaves the 3rd tab in a selected state (not the content just the tab itself) AND ALSO the selected tab shows in a selected state as well.
I'm pulling my hair out trying to figure out what in the world is going on here. I'll be on the road a bit today, but will check in as it's possible. Hopefully one of you can help me straighten this out.
Okay... here's the code from my jquery
$(document).ready(function() {
//build tabs
$("#tabs").tabs( {
cookie: { expires : 30 },
load: function(ui) {
//initilize accordion
$("#accordion").accordion( { active: 2 } );
},
show: function(event, ui) {
//initialize accordion
$("#accordion").accordion( { active : 2 } );
//cookie select
var cookie = $("#tabs").tabs("option", "cookie");
/*
if(cookie) {
$("#tabs").tabs("select", $.cookie('ui-tabs-1'));
} else {
$("#tabs").tabs("select", 2);
}
*/
},
ajaxOptions: {
dataFilter: function(data, dataType) {
return $(data).find("#content_area");
}
}
} );
});
Here's the code from my tabs:
<div id="tabs">
<ul>
<li>Home</li>
<li>Services</li>
<li>Company</li>
<li>Employee</li>
<li>Work Tools</li>
<li>Contact</li>
</ul>
<div id="content_area">
<p>CONTENT HERE</p>
</div>
<!-- end #content_area -->
I sincerely appreciate your help.
Okay... Figured it out! Went in a completely new direction and actually ended up better as I can use the tabs and the back button with custom address bar changes.
I highly recommend the jQuery Address plugin as I used it to solve my problems. I had to do some tweaking with the accordion in the tabs because the autoHeight wouldn't work, but fixed that by checking the height() of accordion divs and setting changestart.