Wayfinder menu with rounded corner bottom

463 Posts

Tyreal2012 Reply #1, 16 years, 5 months ago

Hi

I’m trying to create a drop down menu, so far the top and the back of the menu works, but i cannot get a rounded corner to the appear at the bottom of the navigation (see attached image)

The WF tpls are as follows (based on the cssplay dorpdown example)

&parentRowTpl

<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
    <!--[if lte IE 6]>
    <a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
    <table><tr><td>
    <![endif]-->
    [+wf.wrapper+]
    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>

&outerTpl

<div[+wf.classes+]>
    <ul>
        [+wf.wrapper+]
    </ul>
</div>

&innerTpl

<ul>
    [+wf.wrapper+]
</ul>

&rowTpl

<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Wayfinder call

[[Wayfinder? &startId=`0` &level=`2` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown` &firstClass=`first` ]]

CSS

/* common styling */
.menu
{
	font-family:Arial, Helvetica, sans-serif;
	width:750px;
	position:relative;
	font-size:12px;
	margin:0px 0 0px 0px;
	z-index:100;
}

.menu ul
{
	padding-left:20px;
}

.menu ul li a, .menu ul li a:visited
{
	display:block;
	text-decoration:none;
	color:#000000;
	width:100px;
	height:24px;
	text-align:center;
	line-height:20px;
	overflow:hidden;
	float:left;
}

.top-nav li.active a
{
	background-image:url(top-active.png);
	background-repeat:no-repeat;
	background-position:center;
}

.menu ul
{
	padding:0;
	margin:0;
	list-style-type: none;
}

.menu ul li
{
	float:left;
	margin-right:0px;
	position:relative;
}

.menu ul li ul
{
	display: none;
}

/* specific to non IE browsers */
.menu ul li:hover a
{
	color:#ffffff;
	background-image:url(nav-hover-bg-top.png);
	background-repeat:no-repeat;
}

/*.nav-bg{

	}*/

.menu ul li:hover ul
{
	display:block;
	position:absolute;
	top:24px;
	left:0;
	width:100px;
	font-size:12px;
}

.menu ul li:hover ul li a.hide
{
	color:#000000;
}

.menu ul li:hover ul li:hover a.hide
{
	color:#ffffff;
}

.menu ul li:hover ul li ul
{
	display: none;
}

.menu ul li:hover ul li a
{
	display:block;
	/*background:#c0c0c0;*/
	color:#ffffff;
	font-size:10px;
	line-height:20px;
	height:24px;
	text-align:center;
	font-weight:bold;
	min-width:100px;
	letter-spacing:0px;
	border-right:none;
	width:100px;
	background-image:url(nav-hover-bg.png);
	background-repeat:repeat-y;
}

.menu ul li:hover ul li.last
{
}

/*drop down colors*/
.menu ul li:hover ul li a:hover
{
	background-image:url(nav-hover-bg-ro.png);
	background-repeat:repeat-y;
	color:#04b6f2;
	font-size:10px;
	line-height:20px;
}

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 16 years, 5 months ago

Looks like you need to use something like

ul li ul li.last{background:url(rounded-corner.jpg) bottom right;}

The last item of each group is given a classname of "last", so you can use it for the end of each group.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

463 Posts

Tyreal2012 Reply #3, 16 years, 5 months ago

Thanks Susan i-ll try it.

463 Posts

Tyreal2012 Reply #4, 16 years, 5 months ago

Thanks for looking Susan,

Its not working quite right, it might be due to my idiocy i dont know.

Its displaying, but not underneath the li element(see attached)

It also will not work if there is only 1 item in the drop down as that will technically be classed as ’first’ - any ideas?

Thanks

82 Posts

apcherry Reply #5, 16 years, 5 months ago

Sorry I’ve no immediate answer for you, just a couple of things to check. It’d be easier if there was a link so that I could see what html source code is being generated.

I know the documentation says that the class &lastClass defaults to last but in my implementation I’ve defined it directly, so my Wayfinder call is

[[Wayfinder? &startId=`0` &level=`3` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &cssTpl=`cssplay_ultdrop` &parentClass=`fly` &levelClass=`lv` &firstClass=`subtop` &lastClass=`subbot` &innerClass=`sub`]]

then &outerTpl is ccplay_outer

   <ul id="menu2">
        [+wf.wrapper+]
    </ul>

With the id set to menu2, then in my css code I think this is the bit giving me the rounded corners although I can’t be positive.

#menu2 li.subbot > span,
#menu2 li.flybot > span {
height:35px !important; background:url(images/tab-botleft.png);
}

#menu2 li.subbot > b {
height:35px !important; background:url(images/tab-botright.png);
}
#menu2 li.flybot > b {
height:35px !important; background:url(images/tab-botright-sub.png);
}

I tried in vain to get it working for IE6 as well but gave up. It’s not the most elegant of implementations, basically I got working more by perspiration than inspiration but you are welcome to check out my site to see hopefully drop down menus with rounded corners. www.cherryclan.com

ps. I have found Google chrome invaluable for debugging the css, in the developer tools you can inspect all the css mark up, highlight it and tweak it to see what’s causing the problems.

Hope this helps

Adrian

463 Posts

Tyreal2012 Reply #6, 16 years, 5 months ago

Thanks I’ll Try it

82 Posts

apcherry Reply #7, 16 years, 5 months ago

Another couple to try then, looking at your css listing and given that your top image seems to work then do either of these work?

.menu ul li ul li.last{background:url(rounded-corner.jpg) bottom right;}

.menu ul li:hover ul li.last{background:url(rounded-corner.jpg) bottom right;}

Hang on a minute might have found it - in your css file you already have that element defined but it’s blank

.menu ul li:hover ul li.last
{
}

In this bit of your css file I think you need to put in the background tag like so

.menu ul li:hover ul li.last
{background:url(nav-hover-bg-bot.png);
}

Adrian

463 Posts

Tyreal2012 Reply #8, 16 years, 5 months ago

Hang on a minute might have found it - in your css file you already have that element defined but it’s blank

.menu ul li:hover ul li.last
{
}

Yeah its from when i was playing with it myself, it gave the same result as the screenshot.

ill try your way in a while see if that helps.

Cheers

701 Posts

bennyb Reply #9, 16 years, 5 months ago

I might be missing somthing, but can’t you apply the top corners to the containing div and the bottom to the UL.

So

div {background:url(rounded-corner-top.jpg)no-repeat;}

ul {background:url(rounded-corner-top.jpg)bottom no-repeat;}

463 Posts

Tyreal2012 Reply #10, 16 years, 5 months ago

The problem with that is they only appear on Hover, rather than all the time.