Jump to content

crumbs/menu combination


MeowMix
 Share

Recommended Posts

I am designing a site using weebly.com for someone who is more illiterate at this than I am because they need an easy interface to manage it once i am done. I am a little in over my head regarding one particular aspect of it. Weebly doesnty allow multiple menues so i have to make it all happen within the confines of 1 menu/nav structure. I have to create breadcrumbs that also act as a truncated hover nav menu.Best way to show is by picture i guess. Description. The drop down menu for the Fixed logo only shows the main pages (no sub-pages).The dynamic part is the breadcrumbs/menu combination. If you were on page B the breadcrumbs menu would look like this: Fixed Logo (showing only main pages, no sub pages) / Page B (showing sub-page nav) / Sub B1 It needs to be dynamic (vs. fixed links) because I want it to automatically show new pages without having to manually update the nav menu. wHOY7.jpg Essentially I am wondering if it is possible to do this with CSS without using and scripts.

Link to comment
Share on other sites

This site generates some code? Or is it Flash? I saw the service, but I saw a demo on encoding.If you generate an HTML page then each page is an HTML, and each of you define what appears in the menu or not.But from what you said, you want the content is dynamic, but the structure is static, right? So you have to use AJAX, if the site is HTML. And use the class "active" css in your menu, with "li: active", then set it will be visible "display: block;", or whatever you want.

Link to comment
Share on other sites

The site is HTML but not every page has its own HTML template. Several pages are generated from the same HTML template. So yea the structure is static but content is dynamic. So AJAX is the only way? I was really hoping not to have to use scripts, mainly because thats a little out of my league.

Link to comment
Share on other sites

Question 1, are you allowed to use javascript, php or ASP.NET, are you even allowed to add or use xml files, so previous mentioned can read? Question 2, If you plan using a dynamic automatically generated menu, how is this going to be achieved with ajax, in such a way that for the person you are creating this for, needs to do absolutely nothing? normally the menu would be produced dynamically by server language (php. asp.net) in the form of unordered listing (ul, li ), and you use css to produce the menu you require, otherwise the menu details would need updating manually.

Link to comment
Share on other sites

From the point of view really need a CMS Sinama a language such as PHP or ASP. But if the site is static HTML, then yes it can make it work with jQuery, just write the script correctly, for example:"When the link is clicked #about then you div #about shows and hides the div #home, and also shows a new link in the sub-menu #about-sub-link" ... This is possible with jquery.But atneção this example I showed you how to make website that has a few pages and the content is static (slightly updated) and has no programming language behind, ie, only HTML and Java Script.

Link to comment
Share on other sites

IF you wish to make a second menu which has identical menu/submenus to the first, the possible workable solution is to copy the first menu completely, and place it where you require, using jquery preferably, you would have rename any id ref within the new menu as they must be unique within the page, and also maybe classes to prevent conflict with first menu. Once that is done you create css styling for new class and id ref of the second menu. Simple example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function()    {    $("#menu ul").eq(0).clone().appendTo("#custom_menu2");        $("#custom_menu2 *").each(function()        {        if($(this).attr("id"))            {            $(this).attr("id", "cs_"+($(this).attr("id")))            }        /*if($(this).attr("class"))            {            $(this).attr("class", "cs_"+($(this).attr("class")))            } Should not be required if css done correctly*/           	  });            });  /*--*//*]]>*/</script> <style type="text/css"> #menu a {text-decoration:none;} #menu ul, #menu li {padding: 0;margin: 0;list-style: none;text-indent:0;} /*all levels li*/#menu  ul li {width: 150px;height: 20px;background: #FFCC00;float:left;text-align:center;position:relative; /*very very important!*/} /*sublevel 1 ul and below*/#menu ul ul{position: absolute; width:150px; left:0; /*very very important! will force ALL submenu ul to be POSiTION:ABSOLUTE relative to parent li which now has POSITION:RELATIVE positioning */}#menu ul ul li{width:100%;}#menu ul ul li:hover {background: #99FF00;}  /*sublevel 2 ul and below*/#menu ul ul ul {margin-left:150px; top:2px;}#menu ul ul ul li:hover {background: #3399FF;}  /*set NORMAL state depending on hover of specific level */ #menu ul ul,#menu ul li:hover li ul, /*sublevel 1 ul*/#menu ul ul li:hover li ul  /*sublevel 2 ul*/{display:none;} /*set HOVER state depending on hover of specific level */ /*sublevel 1 ul*/#menu ul li:hover ul{display:block;} /*sublevel 2 ul*/#menu ul ul li:hover ul {display:block;} /*sublevel 3 ul*/#menu ul ul ul li:hover ul {display:block;}    /* Custom Menu2 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/#custom_menu2 {clear:both; padding-top:150px; width: 150px;} #custom_menu2 a {text-decoration:none;} #custom_menu2 ul, #custom_menu2 li {padding: 0;margin: 0;list-style: none;text-indent:0;} /*all levels li*/#custom_menu2  ul li {width: 150px;height: 20px;background-color:#0099CC;float:left;text-align:center;position:relative; /*very very important!*/} /*sublevel 1 ul and below*/#custom_menu2 ul ul{position: absolute; width:150px; left:0; margin-left:150px; top: 2px; /*very very important! will force ALL submenu ul to be POSiTION:ABSOLUTE relative to parent li which now has POSITION:RELATIVE positioning */}#custom_menu2 ul ul li{width:100%;}#custom_menu2 ul ul li:hover {background-color:#3399FF;}  /*sublevel 2 ul and below*/#custom_menu2 ul ul ul {margin-left:150px; top:2px;}#custom_menu2 ul ul ul li:hover {background-color:#00CCFF;}  /*set NORMAL state depending on hover of specific level */ #custom_menu2 ul ul,#custom_menu2 ul li:hover li ul, /*sublevel 1 ul*/#custom_menu2 ul ul li:hover li ul  /*sublevel 2 ul*/{display:none;} /*set HOVER state depending on hover of specific level */ /*sublevel 1 ul*/#custom_menu2 ul li:hover ul{display:block;} /*sublevel 2 ul*/#custom_menu2 ul ul li:hover ul {display:block;} /*sublevel 3 ul*/#custom_menu2 ul ul ul li:hover ul {display:block;} </style></head><body><div id="menu"><ul><li><a href="#">Menu 1</a>	<ul>		<li><a href="#">subMenu 1</a>			<ul>				<li><a href="#">subsubMenu1 1</a></li>				<li><a href="#">subsubMenu1 2</a></li>			</ul>					</li>		<li><a href="#">subMenu 2</a></li>	</ul></li>	<li><a href="#">Menu 2</a>	  <ul>		<li><a href="#">subMenu2 1</a></li>		<li><a href="#">subMenu2 2</a></li>	</ul></li><li><a href="#">Menu 3</a></li></ul></div> <div id="custom_menu2"></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

IF you wish to make a second menu which has identical menu/submenus to the first, the possible workable solution is to copy the first menu completely, and place it where you require, using jquery preferably, you would have rename any id ref within the new menu as they must be unique within the page, and also maybe classes to prevent conflict with first menu. Once that is done you create css styling for new class and id ref of the second menu. Simple example
But then id still have to manually asign any newly created pages different IDs in order for the 2nd menu to also work right?
Link to comment
Share on other sites

No! from what i can gather weebly.com assigns a unique id automatically, to each menu li created, these are mostly used by the weebly 'page manage' to identify which menu belongs to which page within the app itself and not used in the css styling of the li at all, except maybe for the hidden menus. Anyway the jquery example I provided, clones the menu, then rewrites the id ref with a prefix of 'cs_' of any id ref found within the menu, so if a id ref of id="menuid1234567890" was found it would rewrite it as id="cs_menuid1234567890" so not to conflict with old/original menu li id ref

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...