5 Replies - 1298 Views - Last Post: 06 November 2012 - 09:55 AM Rate Topic: -----

#1 teamsilvamma  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 153
  • Joined: 17-January 12

Menu issue

Posted 06 November 2012 - 07:29 AM

First of all, this is not homework. It's simply a website that I am building on my own. I want to get more familiar with ASP.NET and javascripting and I have this menu that works great with one exception...How do I make a subdued menu? or submenu? For example, I want to make a page and subdue it to the About Us Menu button so that when the user hovers over it, it will show the options to more pages.

I'm guessing I would have to make another array and put it in a separate function and make it so that it is active with mouseover. But I'm not sure if I'm mixing up Java with Javascript and/or if I am complicating things

Here's my code behind the site.master page so far

protected string RenderMenu()
        {
            var result = new StringBuilder();
            RenderMenuItem("Home", "Default.aspx", result);
            RenderMenuItem("About", "About.aspx", result);
            RenderMenuItem("Programs", "Services.aspx", result);
            RenderMenuItem("Gallery", "Gallery.aspx", result);
            RenderMenuItem("Feedback", "Feedback.aspx", result);
            RenderMenuItem("Contact", "ContactUs.aspx", result);

            return result.ToString();
        }

        void RenderMenuItem(string title, string address, StringBuilder output)
        {
            output.AppendFormat("<li><a href=\"{0}\" ", address);

            var requestUrl = HttpContext.Current.Request.Url;
            if (requestUrl.Segments[requestUrl.Segments.Length - 1].Equals(address, StringComparison.OrdinalIgnoreCase)) 
                // If the requested address is this menu item.
                output.Append("class=\"ActiveMenuButton\"");
            else
                output.Append("class=\"MenuButton\"");

            output.AppendFormat("><span>{0}</span></a></li> ", title);
        }

 


And this is how I am calling it in the site.master page. Of course all menu properties and attributes are in a separate css called Menu

<div class="Menu">
    <ul><%= RenderMenu() %></ul>
</div>



Is This A Good Question/Topic? 0
  • +

Replies To: Menu issue

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Menu issue

Posted 06 November 2012 - 07:52 AM

Hello,

This appears to be something for the ASP.Net section, not Javascript. Correct me if I am mistaken.
Was This Post Helpful? 0
  • +
  • -

#3 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Menu issue

Posted 06 November 2012 - 07:58 AM

I'm not one for ASP.NET and I've had very little knowledge of it but my colleague here says unless you're aiming for themes on the site you should look at http://msdn.microsof...5(v=vs.80).aspx
Was This Post Helpful? 0
  • +
  • -

#4 teamsilvamma  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 153
  • Joined: 17-January 12

Re: Menu issue

Posted 06 November 2012 - 08:08 AM

View PostKruithne, on 06 November 2012 - 09:58 AM, said:

I'm not one for ASP.NET and I've had very little knowledge of it but my colleague here says unless you're aiming for themes on the site you should look at http://msdn.microsof...5(v=vs.80).aspx


Yeah, I am using themes. I originally started with the menu control, which it's the easiest way, but I couldn't use my custom menu buttons cause the menu control already bring one so it clashed. I could use ss to modify the menu control buttons but it would take me forever because of the round edges I gave the button.

I think this is a javascript topic. It could apply to anything, I just happen to be using it in asp.net
Was This Post Helpful? 0
  • +
  • -

#5 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Menu issue

Posted 06 November 2012 - 08:39 AM

The reason I say it seems to not be a Javascript issue is because you have provided no code to show your attempts at using it in this case, you have only shown ASP.NET code.

If I was to write an application in PHP that outputs Javascript, I would either post in the PHP forum if there was an issue with the output or if it was an issue with the actual Javascript, I would post only the outputted Javascript, not the server-side code.

Back on topic, I don't see how having rounded corners would make your task difficult unless you are forcing your site to work under incompatible browsers and therefore require some CSS hacks or such.

I have prepared a small snippet of code for you below which shows how you can use jQuery to achieve a very basic version of what I presume you are after. The comments provided with it should be enough to follow it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<style>
	#myMenu div div
	{
		display: none;
	}
	
	#myMenu
	{
		border: 1px solid black;
		width: 200px;
	}
</style>
	
<script>
$(document).ready(function()
{
	// Hook an event with the document to trigger on mouseenter over #myMenu DIVs
	$(document).on('mouseenter', '#myMenu div', function()
	{
		// We use children() here instead of find() to avoid showing sub items of the sub items.
		$(this).children().show(); // Show the children
	});
	
	$(document).on('mouseleave', '#myMenu div', function()
	{
		// We use children() here instead of find() to avoid showing sub items of the sub items.
		$(this).children().hide(); // Hide the children
	});
});
</script>

<div id="myMenu">
	<div>
		This is a menu item
		<div>
			This is a sub menu item
			<div>This is a sub sub menu item</div>
			<div>This is a sub sub menu item</div>
			<div>This is a sub sub menu item</div>
			<div>This is a sub sub menu item</div>
			<div>This is a sub sub menu item</div>
		</div>
		<div>This is a sub menu item</div>
		<div>This is a sub menu item</div>
		<div>This is a sub menu item</div>
		<div>This is a sub menu item</div>
		<div>This is a sub menu item</div>
	</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
</div>


Now, as you did put this in the Javascript forum I will also presume you might be against using jQuery or other such libraries so below is a pure Javascript version.

<style>
	#myMenu div div
	{
		display: none;
	}
	
	#myMenu
	{
		border: 1px solid black;
		width: 200px;
	}
</style>

<div id="myMenu">
	<div>
		This is a menu item
		<div>
			This is a sub menu item
			<div>This is a sub sub menu item</div>
			<div>This is a sub sub menu item</div>
			<div>This is a sub sub menu item</div>
			<div>This is a sub sub menu item</div>
			<div>This is a sub sub menu item</div>
		</div>
		<div>This is a sub menu item</div>
		<div>This is a sub menu item</div>
		<div>This is a sub menu item</div>
		<div>This is a sub menu item</div>
		<div>This is a sub menu item</div>
	</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
	<div>This is a menu item</div>
</div>

<script>
		// A pointer to our menu element.
		var menu = document.getElementById('myMenu');
		
		// Loop through all the children of the menu
		for (var child_pointer in menu.children)
		{
			var child = menu.children[child_pointer]; // The current child in the loop.
			
			// Hook a mouseover event to the child.
			child.onmouseover = function()
			{
				// Loop through the children of this child.
				for (var sub_child_pointer in this.children)
				{
					var sub_child = this.children[sub_child_pointer]; // The current sub-child.
					
					if (sub_child.style) // Check if the element has the style attribute.
						sub_child.style.display = 'block'; // Set the display using the default DIV display.
				}
			};

			// Hoko a mouseout event to the children.
			child.onmouseout = function()
			{
				// Loop through the children of this child.
				for (var sub_child_pointer in this.children)
				{
					var sub_child = this.children[sub_child_pointer]; // The current sub-child
					
					if (sub_child.style) // Check if the element has the style attribute.
						sub_child.style.display = 'none'; // Set the display to hidden (none).
				}
			};
		}
</script>


The pure Javascript version however does not cover sub-sub-items and is quite tacky, but I am only trying to give you an idea of which direction to take for Javascript menus. All you will need to do to cover multiple levels of sub-menus is create a function to hook to the children which can be used in a recursive fashion, each recursion triggering a check of it's own children.
Was This Post Helpful? 0
  • +
  • -

#6 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6039
  • View blog
  • Posts: 23,435
  • Joined: 23-August 08

Re: Menu issue

Posted 06 November 2012 - 09:55 AM

Moved to ASP.NET
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1