dropdown menu hidden

9 Posts

vadim88 Reply #1, 19 years, 9 months ago

hey i can seem to figure out how to make my dropdown menu in the site to be hidden and only when u press one of the titles its submenus shown and so on....
like:

main
-main-sub1
-main-sub2
-main-sub3
--sub3-sub1
--sub3-sub2

i want the main to be shown when u press it the main-sub1/2/3 will be shown and when u press the main-sub3 its sub contents to be shown.
i read several tutorials but came with nothing good, i reall hope someone would be able to help me out.
thanks.

here is what i have in my template:

        <!-- start side bar -->
            <div id="wrapper-rightcol">
            
                <h3>Navigation</h3>
                
                <div id="mainmenu">
                    <ul>
                    <li>[[Wayfinder? &startId=`0` &hereClass=`active`]]</li>
                   </ul>
                </div>
                
            </div>

and my css:

#wrapper-rightcol {
	float: right;
	width: 200px;
	margin: 20px 0px 20px 2em;
	text-align: center;
	line-height: 140%;
	font-family: "Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
	border-left: 1px solid #eee;
	padding-right: 30px;
}
#sideContent {
	margin: 25px auto;
}
#mainmenu {
	width: 170px;
	margin: 0 0 10px 0;
	padding-left: 15px;
	font-size: 0.9em;
}
#mainmenu ul {
	list-style: none;
	width: 170px;
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 1.1em;
}
#mainmenu ul li {
	margin-bottom: 1px;
}
#mainmenu ul li a, #mainmenu ul li ul li a, #mainmenu ul li.active ul li a {
	font-weight: bold;
	height: 20px;
	text-decoration: none;
	color: #505050;
	display: block;
	padding: 4px 0 2px 0px;
	background: url('../img/menu.png') top center repeat-x;
	border-left: 4px solid #cccccc;
}
#mainmenu ul li a:hover, #mainmenu ul li ul li a:hover {
	background: url('../img/menu-hover.png') top center repeat-x;
	color: #336699;
	border-left: 4px solid #336699;
}
#mainmenu ul li.active a, #mainmenu ul li.active ul li.active a {
	background: url('../img/menu-active.png') top center repeat-x;
	color: #336699;
	border-left: 4px solid #FF9900;
}
#mainmenu ul li.active a:hover, #mainmenu ul li.active ul li a:hover {
	background: url('../img/menu-hover.png') top center repeat-x;
	color: #336699;
	border-left: 4px solid #336699;
}
#mainmenu ul li ul {
	width: 155px;
	margin: 1px 0 0 15px;
	font-size: .9em;
}

any help would be highy appriciated.

thanks.

126 Posts

gfroyle Reply #2, 19 years, 9 months ago

Couple of things...

Try

[[Wayfinder? &startId=`0`  &hideSubMenus=`TRUE`]]

Also, Wayfinder creates a complete unordered list contained in a <ul> </ul> pair..

I can’t tell for sure that you DON’T want ANOTHER <ul> </ul>pair, but it would be more usual to have

<div id="mainmenu">
[[Wayfinder ... ]]
</div>

rather than have a unordered list whose first and only item is another unordered list...

HTH

Gordon

9 Posts

vadim88 Reply #3, 19 years, 9 months ago

thanks for the reply, i removed the ul and li tags from the template and added &hideSubMenus=`TRUE` and still the submenus are shown.

126 Posts

gfroyle Reply #4, 19 years, 9 months ago

Quote from: vadim88 at Dec 25, 2006, 06:19 AM

thanks for the reply, i removed the ul and li tags from the template and added &hideSubMenus=`TRUE` and still the submenus are shown.

Hmm.. make sure your cache is cleared... (to be safe, replace the [[Wayfinder]] with [!Wayfinder!]).. I copied the code directly from my own site where it works fine (I am using 0.95 RC2)..

9 Posts

vadim88 Reply #5, 19 years, 9 months ago

i have cleared my cache twice, and changed the wayfinder to those:
doesnt help:

[[Wayfinder? &startId=`0`  &hideSubMenus=`TRUE`]]

both of those doesnt show the whole menu:

[[!Wayfinder? &startId=`0`  &hideSubMenus=`TRUE`!]]
[[!Wayfinder!? &startId=`0`  &hideSubMenus=`TRUE`]]

9 Posts

vadim88 Reply #6, 19 years, 9 months ago

here is what i have now:

        <!-- start side bar -->
            <div id="wrapper-rightcol">
            
                <h3>Navigation</h3>
                
                <div id="mainmenu">
                   [[Wayfinder? &startId=`0` &hideSubMenus=`TRUE`]]
                </div>
                
            </div>

and my css:

#wrapper-rightcol {
	float: right;
	width: 200px;
	margin: 20px 0px 20px 2em;
	text-align: center;
	line-height: 140%;
	font-family: "Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
	border-left: 1px solid #eee;
	padding-right: 30px;
}
#sideContent {
	margin: 25px auto;
}
#mainmenu {
	width: 170px;
	margin: 0 0 10px 0;
	padding-left: 15px;
	font-size: 0.9em;
}
#mainmenu ul {
	list-style: none;
	width: 170px;
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 1.1em;
}
#mainmenu ul li {
	margin-bottom: 1px;
}
#mainmenu ul li a, #mainmenu ul li ul li a, #mainmenu ul li.active ul li a {
	font-weight: bold;
	height: 20px;
	text-decoration: none;
	color: #505050;
	display: block;
	padding: 4px 0 2px 0px;
	background: url('../img/menu.png') top center repeat-x;
	border-left: 4px solid #cccccc;
}
#mainmenu ul li a:hover, #mainmenu ul li ul li a:hover {
	background: url('../img/menu-hover.png') top center repeat-x;
	color: #336699;
	border-left: 4px solid #336699;
}
#mainmenu ul li.active a, #mainmenu ul li.active ul li.active a {
	background: url('../img/menu-active.png') top center repeat-x;
	color: #336699;
	border-left: 4px solid #FF9900;
}
#mainmenu ul li.active a:hover, #mainmenu ul li.active ul li a:hover {
	background: url('../img/menu-hover.png') top center repeat-x;
	color: #336699;
	border-left: 4px solid #336699;
}
#mainmenu ul li ul {
	width: 155px;
	margin: 1px 0 0 15px;
	font-size: .9em;
}

126 Posts

gfroyle Reply #7, 19 years, 9 months ago

This is my EXACT navigation...

<div class="sideblock" id="sideMenu">
[!Wayfinder? &startId=`0` &level=`3` &hideSubMenus=`TRUE`  &hereTpl=`wfHere`!]
</div>

The "level = 3" says to only produce 3 levels (directory, sub-dir, sub-sub-dir but not sub-sub-sub-dir) while hideSubMenus makes ONLY the submenus below the currently active main menu item be displayed.

(I think this is what you want, but there are a couple of places where I am not clear.. look at http://people.csse.uwa.edu.au/gordon to check if this is the effect you need.)

The "wfHere" template is simply adapted in a very very minor way from the default one in order to put the little double-left-arrow on the currently-chosen item.. I just added the « to the standard. In any case, here it is in case you want to look at it...

<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>

That might be all for tonight from me.. so hope this helps..

Gordon

9 Posts

vadim88 Reply #8, 19 years, 9 months ago

thanks for the help, there is improvment but still it shows all of the menus, maybe i need to change something in the css i am almost sure but i dont know what, i need to put something with display:none; and when the paren menu is active it would be display:block;
something like this, but i dont really know how to do that really.
any help would be appriciated.
by the way can u show me the css u used for that menu , thanks again.

☆ A M B ☆
24,524 Posts

sottwell Reply #9, 19 years, 9 months ago

li ul{display:none}
li:hover ul{display:block}

for this to work in IE6 and below you need to have one of the "hover everything" scripts included in the HTML document head. There is one included with MODx, in the assets/js folder, named csshover.htc. CSSPlay has a method using a system of IE conditional statements to enclose everything in technically invalid <a> tags where you don’t need the "hover everything" script.

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

9 Posts

vadim88 Reply #10, 19 years, 9 months ago

thanks but how do u include it in my css?
and about the csshover.htc how do i include it and where?

here is the css:

#wrapper-rightcol {
	float: right;
	width: 200px;
	margin: 20px 0px 20px 2em;
	text-align: center;
	line-height: 140%;
	font-family: "Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
	border-left: 1px solid #eee;
	padding-right: 30px;
}
#sideContent {
	margin: 25px auto;
}
#mainmenu {
	width: 170px;
	margin: 0 0 10px 0;
	padding-left: 15px;
	font-size: 0.9em;
}
#mainmenu ul {
	list-style: none;
	width: 170px;
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 1.1em;
}
#mainmenu ul li {
	margin-bottom: 1px;
}
#mainmenu ul li a, #mainmenu ul li ul li a, #mainmenu ul li.active ul li a {
	font-weight: bold;
	height: 20px;
	text-decoration: none;
	color: #505050;
	display: block;
	padding: 4px 0 2px 0px;
	background: url('../img/menu.png') top center repeat-x;
	border-left: 4px solid #cccccc;
}
#mainmenu ul li a:hover, #mainmenu ul li ul li a:hover {
	background: url('../img/menu-hover.png') top center repeat-x;
	color: #336699;
	border-left: 4px solid #336699;
}
#mainmenu ul li.active a, #mainmenu ul li.active ul li.active a {
	background: url('../img/menu-active.png') top center repeat-x;
	color: #336699;
	border-left: 4px solid #FF9900;
}
#mainmenu ul li.active a:hover, #mainmenu ul li.active ul li a:hover {
	background: url('../img/menu-hover.png') top center repeat-x;
	color: #336699;
	border-left: 4px solid #336699;
}
#mainmenu ul li ul {
	width: 155px;
	margin: 1px 0 0 15px;
	font-size: .9em;
}

thanks alot.