Assistance needed in creating a MVC3 and Razor 2-level horizontal navigation menu

I am attempting to create a 2-level horizontal menu, similar to the one featured on the following site: TV.Com

Despite searching on google, I am struggling to put it all together.

Below is the sample code I am working with:

<div id="divNav">
<ul id="nav">

<li id="liRenaissance" class="off"><a href="#"><span>Renaissance</span></a>
<ul>
    <li><a href="#">Brunelleschi</a></li>
    <li><a href="#">Alberti</a></li>
    <li><a href="#">Palladio</a></li>
    <li><a href="#">Michelangelo</a></li>
    <li><a href="#">Bramante</a></li>
</ul></li>  
<li id="liModern" class="on"><a href="#"><span>Modern</span></a>
<ul>
    <li><a href="#">Sullivan</a></li>
    <li><a href="#">Le Corbusier</a></li>
    <li><a href="#">Mies</a></li>
    <li><a href="#">Gropius</a></li>
    <li><a href="#">Yamasaki</a></li>
</ul></li>  

The CSS seems to be functioning correctly. However, I am unsure how to configure this from the controller without relying on Request.Querystring.

I would greatly appreciate any assistance!

Answer №1

Helpful resource for simplifying your tasks: Check out the ASP.NET MVC Sitemap provider

Answer №2

It seems like you are looking to toggle between turning one menu on and the other off based on your site location from the given markup.

If you prefer not to use Request.Querystring in the master page directly, you could consider the following options:

  1. Implement a codebehind in your master page. While this method may be outdated in MVC, it can help separate concerns for a controller-less master page.

  2. Utilize RenderAction to refer to a controller responsible for handling menu creation.

The second option is likely your best choice here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align a button within an input field to be in line with a stacked label in

I'm currently facing some issues with Ionic because it's not placing my button where I want it to be: https://i.stack.imgur.com/qtUQJ.png My goal is to have the button on the same line as the input, similar to the clear-button. This is the cod ...

Leveraging the power of React in conjunction with an HTML template

After purchasing an HTML template from theme forest, I am now looking to incorporate React into it. While I find implementing Angular easy, I would like to expand my skills and learn how to use React with this template. Can anyone provide guidance on how ...

Alignment problem detected in Firefox and Safari, but works perfectly in Chrome

Currently dealing with a CSS problem on my website that is only appearing in Safari and Firefox, while Chrome displays it correctly. The images are not positioning correctly and are stacking instead of being placed in each box as intended. I've expe ...

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

What is the best way to ensure an image is shown in full screen exclusively on mobile devices?

My goal is to have two different site templates, one for desktop (which is already good) and one for mobile. For the mobile template, I want it to display only an image that fills the entire screen. The image should take up all the available space in term ...

Unable to load Webfont Trade Gothics in Internet Explorer 8

The following code is used to ensure proper functionality of webfonts across all browsers: @font-face { font-family: 'TradeGothic-BoldCondensedNo20'; src: url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.eot?' ...

Cannot see the box-shadow with :before and z-index in CSS

My main objective is to prevent the box-shadow from overlapping with adjacent elements by utilizing the :before pseudo-element and adjusting the z-index. However, I am facing an issue where the shadow appears beneath the container of the list item that is ...

Is there a way to make a button on a single div only affect that specific div

I have a PHP query that echoes a div for each row in the table. I want the div to slide up and then, when the user clicks the "read more" button, the div slides down. However, since it is echoed in a loop, all the divs have the same IDs and classes. I wo ...

How to retrieve the index upon clicking in Javascript

In my 3d art gallery project, I am utilizing plain JavaScript. The task at hand involves populating certain columns with images by pulling from an array of image sources. On click, I need to retrieve the index of the clicked image so that I can extract add ...

What causes the modal to appear and then vanish suddenly?

I've created a simple modal code with minimal JS involved. When the button is clicked, the modal appears briefly, then the page refreshes and the modal disappears. I'm not sure what could be causing this issue. Any help would be appreciated! h ...

Differences Between Mobile and Desktop Browser Media Queries

As I work on creating a responsive website, I have come across various examples of sites that adapt well to both desktop and mobile browsers. Currently, my stylesheet setup includes different media queries for various screen sizes. However, I've notic ...

Is there a more efficient approach to extracting the border width using javascript?

I implemented the following code: const playGard = document.getElementsByClassName("playGard")[0]; const borderW = getComputedStyle(playGard,null).getPropertyValue('border-left-width').substr(0,2); The result I obtained was "10". Is there a m ...

The functionality of DataTables is not supported on Internet Explorer versions 8 and below

My current setup involves using DataTables to present data in a tabular format with pagination and sorting functionalities. While this is working smoothly across all browsers, I have encountered an issue specifically in IE versions 8 and below. According t ...

Is there a way to eliminate the underline in TextField components in Material-UI?

Is there a way to remove the underline from a material-ui TextField without using InputBase? I would prefer to stick with the TextField API, but have not been able to find a solution in the documentation. ...

What is the process for adjusting the switch size in react-bootstrap?

I've been struggling to increase the size of the react-bootstrap switch without success. I searched through the documentation and tried various methods, but couldn't find a solution other than directly modifying the bootstrap css. Here's the ...

Vuejs components that have checkboxes already selected out of the box

Hey there, I'm facing a small issue. Whenever I click on the areas highlighted in the image, the checkbox on the left gets marked as well. Any idea why this might be happening? https://i.stack.imgur.com/nqFip.png <div class="form-check my-5&qu ...

What is the best way to resize an image in HTML based on a percentage of its height?

Within my HTML code, I have a PNG image that has been adjusted in size using CSS: .adjust-image { border:1px solid #021a40; display: block; width: auto; max-width: 100%; max-height: 1000px; } .img-container { position: relative; } ...

Creating a visual feast: A guide to crafting a stunning image gallery

Is there a way to ensure all the pictures in a table are the same size, orientation, and inline? Currently, my images vary in size and rotation. The CSS I have applied is styling only the first image differently from the rest. Any help is appreciated! CSS ...

CSS: The button text appears to be aligned to the bottom of a line height that is seemingly larger than

There seems to be a strange issue with the way class styles are being applied to elements, causing them to render differently depending on whether they are applied to an anchor tag or a button. The class 'btn' is defined below; .btn { backg ...

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...