Wayfinder Dropdown examples?

6 Posts

snowskysnow Reply #1, 14 years, 6 months ago

Hi all,

I'm new to Modx but have been really pleased with what I've managed so far. I've a working horizontal basic wayfinder menu, formatted with css.

I now need to modify this to a 'mouse over' drop down style menu but I'm struggling to find any examples I can play with and understand how to make it work.

I've spent the day trying to implement the 'ultimate dropdown' example in the Muddydogpaws site as it match's what I need.

However I'm struggling and get the feeling that the css isn't working or something is missing.

http://muddydogpaws.com/development/wayfinder/examples/example-7.html

Any suggestions or other examples I can play with ?

My site is www.3d-alchemy.co.uk

Many thanks

David

1,098 Posts

microcipcip Reply #2, 14 years, 6 months ago

You are using MODX Evolution right?
Is the dropdown on your website?

Please share some code otherwise it is difficult to help you out. Remember to wrap the code with the code button or this forum will "eat" the code and it won't display.

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

6 Posts

snowskysnow Reply #3, 14 years, 6 months ago

Thanks for your reply

Yep, evolution 1.0.6

I've a 'live' dev site at www.mcpy.co.uk which has my efforts so far. Since my original post I discovered the example html to support the 'ultimate dropdown' in the wayfinder/cssplay folder and have a working page using the original html & dedicated CSS.

I'm struggling to combine my original CSS with the new menu CSS so the menu structure is breaking down - I'll post some code once I'm clearer where the issue is...

This is probably at the limit of my modx\css skills ;-) [ed. note: snowskysnow last edited this post 14 years, 6 months ago.]

1,098 Posts

microcipcip Reply #4, 14 years, 6 months ago

Here is a minimalistic example.

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>

	<!-- [Meta] -->		
	<meta charset="utf-8" />
	<!-- [/End Meta] -->	
	
	<title>SiteName</title>

	<style type="text/css">
	html, body, ul, li {
		padding: 0;
		margin: 0;
	}
	ul {
		padding: 40px;
	}
	ul > li {
		display: inline;	
		position: relative;
		float: left;
		list-style: none;
		padding: 0 10px 0;
	}
	ul li ul {
		display: none;
		position: absolute;
		left: 0;
		padding: 0;
		width: 200px;
		background: #DDD;
	}
	ul li:hover {
		background: #DDD;
	}
	ul li:hover ul {
		display: block;
	}
	ul li ul li {
		width: 180px;
	}
	</style>
	
</head>
<body>

	<div id="menu">
		<ul>
			<li><a href="#">Item 1</a>
				<ul>
					<li><a href="#">SubItem 1</a></li>
					<li><a href="#">SubItem 2</a></li>
					<li><a href="#">SubItem 3</a></li>
					<li><a href="#">SubItem 4</a></li>
					<li><a href="#">SubItem 5</a></li>
					<li><a href="#">SubItem 6</a></li>
					<li><a href="#">SubItem 7</a></li>
					<li><a href="#">SubItem 8</a></li>
				</ul>			
			</li>
			<li><a href="#">Item 2</a>
				<ul>
					<li><a href="#">SubItem 1</a></li>
					<li><a href="#">SubItem 2</a></li>
					<li><a href="#">SubItem 3</a></li>
					<li><a href="#">SubItem 4</a></li>
					<li><a href="#">SubItem 5</a></li>
					<li><a href="#">SubItem 6</a></li>
					<li><a href="#">SubItem 7</a></li>
					<li><a href="#">SubItem 8</a></li>
				</ul>			
			</li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
			<li><a href="#">Item 5</a></li>
			<li><a href="#">Item 6</a></li>
			<li><a href="#">Item 7</a></li>
			<li><a href="#">Item 8</a></li>
		</ul>
	</div>
	
</body>
</html>

Wayfinder Example

<!DOCTYPE html>
<html lang="en">
<head>

	<!-- [Meta] -->		
	<meta charset="utf-8" />
	<!-- [/End Meta] -->	
	
	<title>SiteName</title>

	<style type="text/css">
	html, body, ul, li {
		padding: 0;
		margin: 0;
	}
	ul {
		padding: 40px;
	}
	ul > li {
		display: inline;	
		position: relative;
		float: left;
		list-style: none;
		padding: 0 10px 0;
	}
	ul li ul {
		display: none;
		position: absolute;
		left: 0;
		padding: 0;
		width: 200px;
		background: #DDD;
	}
	ul li:hover {
		background: #DDD;
	}
	ul li:hover ul {
		display: block;
	}
	ul li ul li {
		width: 180px;
	}
	</style>
	
</head>
<body>

	<div id="menu">
		[[Wayfinder? &startId=`0` &level=`2`]]
	</div>
	
</body>
</html>

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

6 Posts

snowskysnow Reply #5, 14 years, 6 months ago

Cheers

I think I'm making progress. I've managed to add the dropdown to the site with it's original css style - just need to edit that to make it fit with the site style.

A quick css question - can you have links to more than one css file - and would the second file 'replace' the first ? or would the values in the second file supplement the first ?

2,310 Posts

bunk58 Reply #6, 14 years, 6 months ago

Any duplicated styles in the second referenced stylesheet will override matching values from the first.

1,098 Posts

microcipcip Reply #7, 14 years, 6 months ago

The second replace the first if ther are similar declarations.

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

6 Posts

snowskysnow Reply #8, 14 years, 6 months ago

Thanks all, much progress made - www.mcpy.co.uk

I've a couple of things that are puzzling me:

1. I don't seem to be able to change the position of the menu on the page. It appears to default to being centred despite changing what I *think* is the appropriate css element to change that. I would like to position it bottom \ right of the white 'top' element on the page. The css for the menu setting is here:

.menu {
font-family: calibri, sans-serif; 
width:1000px;                          /* Width of top menu before new line */
position:relative; 
font-size:16px;
z-index:100;
font-weight:bold;
color:#e6e7e8
height:15px								/* 25px ????????????? */
float:right;
}

The full style sheet is here:
http://www.mcpy.co.uk/assets/css/style.css

The template code is:

<div id="main_body">
<!-- Header Starts Here -->

<div id="header">
<!-- Logo Starts Here -->

<div id="logo">
{{3d_main_logo}}      <!-- Logo chunk -->
</div>


<!-- <div class="menu">[[Wayfinder? &startId=`0`]]</div> -->

<div class="menu">[!Wayfinder? &startId=`0` &level=`4` &parentRowTpl=`wfParentRow`!]</div>

<!-- Menu Part Ends Here -->

The logo chunk is:

<a href="index.php"><img src="assets/3d_images/main_logo.jpg" alt="3d-Alchemy Logo" title="3d-Alchemy Logo" /></a>

2. 'Visited' links do not seem to show. There are a few 'width' settings that appear to make no difference and I suspect these relate to visited links. Is there a modx setting for this ?

Any help appreciated !

1,098 Posts

microcipcip Reply #9, 14 years, 6 months ago

.menu {
    float: right;
    font-family: calibri,sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin: 60px 0 0;
    position: relative;
    z-index: 100;
}

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

1,098 Posts

microcipcip Reply #10, 14 years, 6 months ago

Btw, if you install Firebug you will be able to see immediately what css is being applied.

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)