18 replies [Last post]
alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

Hi

I am trying to modify an existing vertical menu which has 2 levels, with the 2nd level being collapsed until the parent page is selected.

This is the original code (whch works fine of course!!)

.side nav {
    margin-bottom: 25px;
}
.side nav ul {
    list-style: none;
}
.side nav a {
    border-top: 1px solid #9e9e9e;
    color: #1a1a1a;
    display: block;
    padding: 10px 20px;
}
.side nav a:hover {
    background-color: #f3f3f3;
}
.side nav .current > a {
    background-color: #000;
    color: #fff;
}
.side nav .level1 {
    border-bottom: 1px solid #9e9e9e;
}
.side nav .level1 > li > a {
    font-weight: bold;
}
.side nav .level1 > .subnodes > a {
    background-image: url(img/icon_down.gif);
    background-position: 5px center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #9e9e9e;
}
.side nav .level1 > .selected > a {
    background-color: #f3f3f3;
}
.side nav .level2 {
    margin-left: 20px;
}
.side nav .level2 > li > a {
    border-top-color: #e5e5e5;
}
.side nav .level2 > li:first-child > a {
    border-top: none;
}
.side nav.collapse .level2 { /* "collapse" class force menu to hide 2nd level until parent or child is not selected */
    display: none;
}
.side nav.collapse .current .level2,
.side nav.collapse .selected .level2 { /* displaying 2nd level */
    display: block;
}
.side nav.collapse .level1 > .subnodes > a { /* fixing style when collapsed */
    background-image: url(img/icon_right.gif);
    background-position: 8px center;
    border-bottom: none;
}
.side nav.collapse .level1 > .subnodes.current > a,
.side nav.collapse .level1 > .subnodes.selected > a { /* fixing style when not collapsed */
    background-image: url(img/icon_down.gif);
    background-position: 5px center;
    border-bottom: 1px solid #9e9e9e;
}

I have tried to modify the above code so that the 3rd level of the menu is hidden until the 2nd level parent is selected. But I have been trying for a long time and evrything I have tried does not work.

The code below behaves exactly as the code above ie when the 1st level parent is selected ALL the 2nd & 3rd level pages are shown. Here is the code, hope someone can help.

My code

.side nav {
	 margin-top: 15px;
    margin-bottom: 25px;
    font-size: 10px;
}
 
.side nav ul {
    list-style: none;
}
.side nav a {
    border-top: 1px solid #8c8282;
    color: #1a1a1a;
    display: block;
    padding: 5px 20px;
}
.side nav a:hover {
    background-color: #f3f3f3;
}
.side nav .current > a {
    background-color: #dcdcdc;
    color: #000000;
}
.side nav .level1 {
    border-bottom: 1px solid #8c8282;
}
.side nav .level1 > li > a {
    font-weight: bold;
}
.side nav .level1 > .subnodes > a {
    background-image: url(img/icon_down.gif);
    background-position: 5px center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #8c8282;
}
.side nav .level1 > .selected > a {
    background-color: #dcdcdc;
}
.side nav .level2 {
    margin-left: 15px;
}
.side nav .level2 > li > a {
    border-top-color: #8c8282;
}
.side nav .level2 > li:first-child > a {
    border-top: none;
}
.side nav.collapse .level2 { /* "collapse" class force menu to hide 2nd level until parent or child is not selected */
    display: none;
}
.side nav.collapse .current .level2,
.side nav.collapse .selected .level2 { /* displaying 2nd level */
    display: block;
}
.side nav.collapse .level1 > .subnodes > a { /* fixing style when collapsed */
    background-image: url(img/icon_right.gif);
    background-position: 8px center;
    border-bottom: none;
}
.side nav.collapse .level1 > .subnodes.current > a,
.side nav.collapse .level1 > .subnodes.selected > a { /* fixing style when not collapsed */
    background-image: url(img/icon_down.gif);
    background-position: 5px center;
    border-bottom: 1px solid #8c8282;
}
.side nav .level2 > .selected > a {
    background-color: #dcdcdc;
}
.side nav .level3 {
    margin-left: 25px;
}
.side nav .level3 > li > a {
    border-top-color: #8c8282;
}
.side nav .level3 > li:first-child > a {
    border-top: none;
}
.side nav.collapse .level3 { /* "collapse" class force menu to hide 3rd level until parent or child is not selected */
    display: none;
}
.side nav.collapse .current .level3,
.side nav.collapse .selected .level3 { /* displaying 3rd level */
    display: block;
}
.side nav.collapse .level2 > .subnodes > a { /* fixing style when collapsed */
    background-position: 8px center;
    border-bottom: none;
}
.side nav.collapse .level2 > .subnodes.current > a,
.side nav.collapse .level2 > .subnodes.selected > a { /* fixing style when not collapsed */
    background-position: 5px center;
    border-bottom: 1px solid #8c8282;
}
.side nav .level3 > .selected > a {
    background-color: #dcdcdc;
}

Thanks in advance if anyone can help me.

Alan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Alan, To see this in

Hi Alan,
To see this in action would make it easier to offer a fix, can you provide a link.
Without the markup the css applies too, we can only guess.

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

HI The link to my page is

HI

The link to my page is

www.megantech.pl

It is still "under construction" Smile

Alan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Alan, Thanks for providing

Hi Alan,
Thanks for providing the link.
I just did a quick search of your source and couldn't find the class level3

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

Sorry should have said you

Sorry should have said you need to one of the English language pages to see the problem, such as

http://www.megantech.pl/en/top/micro-fluidics/micro-fluidic-pumps/micro-fluidic-syringe-pumps/

The Polish language side is not so advanced at the moment

Alan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Ok now we are getting

Ok now we are getting somewhere Wink
I think you want something like this so that when the selected class is on the first level, level3 is still hidden.

.side nav.collapse .selected ul .level3 { 
    display: none;
}
.side nav.collapse .selected .level3 { /* displaying 3rd level */
    display: block;
}

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

Tony Many thanks for the

Tony

Many thanks for the advice, your suggestion hid the 3rd level, but when I clicked on the associated 2nd level tab, the 3rd level page did not appear. ie they are permanently hidden.

Sorry I cannot paste the link as I was doing the mods on my local host set up.

Alan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

You will need to look at the

You will need to look at the markup and make sure that the class selected is applied to the element above level3 and that there is no ul between .selected and .level3 in the html.

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

Hi again ! Unfortunately I am

Hi again !

Unfortunately I am not a programmer and I am really going around in circles.

I have been looking for examples or tutorials on the internet and I cannot anything which refers to menu "levels", level1, level2, level3 etc. Neither can I find any thing about the class="collapse" which is used in the main.php see below

<?php if (!defined('CMS')) exit; ?>
<?php echo $this->doctypeDeclaration(); ?>
 
<html<?php echo $this->htmlAttributes(); ?>>
<head>
<?php
    $site->addCss(BASE_URL.THEME_DIR.THEME.'/960.css');
    $site->addCss(BASE_URL.THEME_DIR.THEME.'/site.css');
    $site->addCss(BASE_URL.THEME_DIR.THEME.'/ip_content.css');
    $site->addCss(BASE_URL.LIBRARY_DIR.'js/colorbox/themes/2/colorbox.css');
    echo $site->generateHead();
?>
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body<?php if ($site->managementState()) { echo ' class="manage"'; } ?>>
 
    <div class="container_12 wrapper">
        <header class="grid_12">
        		<img class="sitename" src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/img/logo.png">
            <div class="languages">
                <?php echo $site->generateBlock('ipLanguages'); ?>
            </div>
            <?php echo $site->generateBlock('ipSearch'); ?>
            <img class="banner" src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/img/header.jpg" alt="">
            <div class="topmenu clearfix">
                <?php
                    require_once (BASE_DIR.LIBRARY_DIR.'php/menu/common.php');
                    $menuTop = new Library\Php\Menu\Common();
                    echo $menuTop->generateSubmenu('top', null, 3); //$zoneName, $parentElementId, $depthLimit
                ?>
            </div>
        </header>
        <div class="main grid_9 right">
        <div class="slideShow">
        <?php echo $site->generateBlock('simpleSlideshow'); ?>
        </div>
            <div class="breadcrumb">
               <?php echo $site->generateBlock('ipBreadcrumb'); ?>
            </div>
            <?php echo $site->generateBlock('main'); ?>
        </div>
        <div class="side grid_3 left">
            <nav class="collapse"><?php /* add class="collapse" to <nav> to hide second level by default */ ?>
                <?php
                    require_once (BASE_DIR.LIBRARY_DIR.'php/menu/common.php');
                    $menuTop = new Library\Php\Menu\Common();
                    echo $menuTop->generate('top');
                    echo $menuTop->generate('top', 2, 4);  //$zoneName, $parentElementId, $depthLimit
                ?>
            </nav>
            <aside>
                <?php echo $site->generateBlock('side'); ?>
            </aside>
            <div> 
             <img class="contact" src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/img/contact.png">
        </div>
 
        </div>
 
        <div class="clear"></div>
 
        <footer class="clearfix">
            <div class="grid_12 clearfix">
                <p class="left">Copyright &nbsp; &nbsp;  Megantech &nbsp; 2012</p>
                <p class="right">Theme lt_pagan &nbsp; &nbsp;    <a href="http://www.impresspages.org">ImpressPages CMS</a></p>
            </div>
        </footer>
    </div>
    <?php
        $site->addJavascript(BASE_URL.LIBRARY_DIR.'js/jquery/jquery.js');
        $site->addJavascript(BASE_URL.LIBRARY_DIR.'js/colorbox/jquery.colorbox.js');
        $site->addJavascript(BASE_URL.THEME_DIR.THEME.'/site.js');
        echo $site->generateJavascript();
    ?>
</body>
</html>

I assume class="collapse" is just a name the authors have chosen to link the css to the html. All the examples & tutorials I have seen refer to ul., li., a., & hover etc.

I don't expect you to waste your time with this, but do you know of any tutorials, examples that use levels in css menus, I would really like to try to understand it better.

I hope you can give me some links.

best regards

Alan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Yes level1 etc and collapsed

Yes level1 etc and collapsed are class names give by the author.
Here's a link of a simple example multi level menu not exactly what you want but may help with understanding the styles.

If you post the code can you view source so we see what the browser sees not the php.

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

Code

Tony
Many thanks for your patience and help I post my modified code at the bottom, as it is working on my site at the moment

http://www.megantech.pl/en/top/micro-fluidics/

The original menu is 2 levels, I cut and pasted from the first and second levels to make the third level, but as I have said I am not a programmer and I do not understand everything I am doing.

The cms is impresspages.org I can completely understand the development team who are from Lithuania, but the documentation is not so good and they are reluctant to help out on detailed problems. Writing good documentation is difficult at the best of times, and writing in a second language is doubly difficult, so I cannot criticize. As I am English mother tongue, if I really understood their system, I would help out with the documentation, but I am still at the bottom of the learning curve !

Anyway I think my problem lies in the cutting, pasting (and not correcting properly) the following snippets

.side nav .level1 > .subnodes > a {
    background-image: url(img/icon_down.gif);
    background-position: 5px center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #8c8282;
}

and

.side nav.collapse .level1 > .subnodes > a { /* fixing style when collapsed */
    background-image: url(img/icon_right.gif);
    background-position: 8px center;
    border-bottom: none;
}
.side nav.collapse .level1 > .subnodes.current > a,
.side nav.collapse .level1 > .subnodes.selected > a { /* fixing style when not collapsed */
    background-image: url(img/icon_down.gif);
    background-position: 5px center;
    border-bottom: 1px solid #8c8282;
}

The problem lies in not correcting the level1, level2 ,level3 etc.

I deleted the arrow icon from my secon level because it corrupted the background, but I think that the problem is that I have not defined the third level properly.

Here is the code as working on my site

main.php

<?php if (!defined('CMS')) exit; ?>
<?php echo $this->doctypeDeclaration(); ?>
 
<html<?php echo $this->htmlAttributes(); ?>>
<head>
<?php
    $site->addCss(BASE_URL.THEME_DIR.THEME.'/960.css');
    $site->addCss(BASE_URL.THEME_DIR.THEME.'/site.css');
    $site->addCss(BASE_URL.THEME_DIR.THEME.'/ip_content.css');
    $site->addCss(BASE_URL.LIBRARY_DIR.'js/colorbox/themes/2/colorbox.css');
    echo $site->generateHead();
?>
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 
<script type="text/javascript">
 
  	var _gaq = _gaq || [];
 	_gaq.push(['_setAccount', 'UA-32582669-1']);
 	 _gaq.push(['_trackPageview']);
 
  	(function() {
    	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</head>
<body<?php if ($site->managementState()) { echo ' class="manage"'; } ?>>
 
    <div class="container_12 wrapper">
        <header class="grid_12">
        		<img class="sitename" src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/img/logo.png">
            <div class="languages">
                <?php echo $site->generateBlock('ipLanguages'); ?>
            </div>
            <?php echo $site->generateBlock('ipSearch'); ?>
            <img class="banner" src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/img/header.jpg" alt="">
            <div class="topmenu clearfix">
                <?php
                    require_once (BASE_DIR.LIBRARY_DIR.'php/menu/common.php');
                    $menuTop = new Library\Php\Menu\Common();
                    echo $menuTop->generateSubmenu('top', null, 3); //$zoneName, $parentElementId, $depthLimit
                ?>
            </div>
        </header>
        <div class="main grid_9 right">
        <div class="slideShow">
        <?php echo $site->generateBlock('simpleSlideshow'); ?>
        </div>
            <div class="breadcrumb">
               <?php echo $site->generateBlock('ipBreadcrumb'); ?>
            </div>
            <?php echo $site->generateBlock('main'); ?>
        </div>
        <div class="side grid_3 left">
            <nav class="collapse"><?php /* add class="collapse" to <nav> to hide second level by default */ ?>
                <?php
                    require_once (BASE_DIR.LIBRARY_DIR.'php/menu/common.php');
                    $menuTop = new Library\Php\Menu\Common();
                    echo $menuTop->generate('top');
                    echo $menuTop->generate('top', 2, 3);  //$zoneName, $parentElementId, $depthLimit
                ?>
            </nav>
            <aside>
                <?php echo $site->generateBlock('side'); ?>
            </aside>
            <div> 
             <img class="contact" src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/img/contact.png">
        </div>
 
        </div>
 
        <div class="clear"></div>
 
        <footer class="clearfix">
            <div class="grid_12 clearfix">
                <p class="left">Copyright &nbsp; &nbsp;  Megantech &nbsp; 2012</p>
                <p class="right">Theme lt_pagan &nbsp; &nbsp;    <a href="http://www.impresspages.org">ImpressPages CMS</a></p>
            </div>
        </footer>
    </div>
    <?php
        $site->addJavascript(BASE_URL.LIBRARY_DIR.'js/jquery/jquery.js');
        $site->addJavascript(BASE_URL.LIBRARY_DIR.'js/colorbox/jquery.colorbox.js');
        $site->addJavascript(BASE_URL.THEME_DIR.THEME.'/site.js');
        echo $site->generateJavascript();
    ?>
</body>
</html>

and site.css (where the problems are)

/**
 *
 * ImpressPages CMS theme: LT pagan
 *
 * Main style file for structure, global styles.
 * Integrated together with 12 column 960 grid system (960.css)
 *
 * @package ImpressPages
 * @copyright Copyright (C) 2011 ImpressPages LTD.
 * @license see ip_license.html
 *
 * @fonts:
 * text: 12px Verdana, Geneva, sans-serif
 * headlines: Georgia, serif
 * other messages: Arial, Helvetica, sans-serif
 *
 * @colors:
 * content background: #fff
 * margins background: #e5e5e5
 * text color: #333 / #000
 * link color: #019bd4
 * error text color: #da0001 / #e44445
 * hint color: #656565
 * inverted text: #fff
 * inverted background: #a7a7a7 / #000
 *
 */
 
/*
    Disabling default styles
*/
html, body, h1, h2, h3, h4, h5, h6, img, blockquote, form, fieldset, label, p, ul, ol, li, dl, dd, dt {
    border: none;
    margin: 0;
    padding: 0;
}
body {
    background-color: #ffffff;
    color: #333;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}
input, select, textarea, option, table {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}
table {
    border-collapse: collapse;
}
a {
    text-decoration: none;
}
h1, h2, h3 {
    font-size: 12px;
}
address {
    font-style: normal;
}
 
/*
    Global
*/
.clear { /* see 960.css */ }
.clearfix { /* see 960.css */ }
.left {
    float: left;
}
.right {
    float: right;
}
 
/*
    Structure
*/
.wrapper {
    background-color: #fff;
    border-color: #8c8282;
    border-style: solid;
    border-width: 7px 0;
    padding: 0 30px;
}
.wrapper > header {
    margin-bottom: 15px;
}
.main {
 
}
.side {
 
}
.wrapper > footer {
    border-top: 2px solid #8c8282;
    color: #8c8282;
    margin: 10px -20px 0;
    padding: 12px 20px;
}
 
/*
    Styles
*/
.sitename {
    color: #000;
    display: block;
    float: left;
    margin: 17px 0;
}
.languages {
    float: right;
    margin-top: 14px;
}
.languages ul {
    list-style: none;
}
.languages li {
    border-left: 1px solid #e5e5e5;
    float: left;
}
.languages li:first-child {
    border: none;
}
.languages a {
    color: #737373;
    padding: 5px 10px;
}
.languages .current a,
.languages a:hover {
    color: #000;
}
.wrapper > header .banner {
    display: block;
}
.topmenu {
	 background-image: url(img/navBar.png);
    background-position: center;
    background-repeat: repeat-x;
    background-color: #0d49a9;
    padding: 1px 0px 0px 1px;
    font-size: 12px;
}
.topmenu li {
    position: relative;
}
.topmenu ul {
    list-style: none;
}
.topmenu .level1 > li {
    float: left;
    margin-right: 1px;
    position: relative;
}
.topmenu .level1 > li > a {
	 border-top: 1px solid #8c8282;
    border-bottom: 1px solid #8c8282;
    color: #f7f7f7;
    display: inline-block;    
    font-weight: bold;
    line-height: 32px;
    padding: 0 20px;
}
.topmenu .level1 > li:hover .level2 {
    display: block;
}
.topmenu .level1 > li:hover > a,
.topmenu .level1 > li > a:hover {
	 background-color: #fff;
    border-color: #8c8282;
    color: #0d49a9; 
}
.topmenu .level1 > .current > a,
.topmenu .level1 > .selected > a {
    background-color: #dcdcdc;
    border-color: #8c8282;
    color: #000;
}
.topmenu .level2 {
    background-color: #f3f3f3;
    border: 1px solid #8c8282;
    border-style:dotted;
    display: none;
    margin: -1px 0 0 -1px;
    min-width: 100%;
    padding: 2px 0;
    position: absolute;
    z-index: 2;
}
.topmenu .level2 a {
    color: #1a1a1a;
    display: block;
    padding: 6px 22px;
    white-space: nowrap;
}
.topmenu .level2 a:hover {
    background-color: #c8c8c8;
}
.topmenu .level2 .current a {
    text-decoration: underline;
}
.topmenu .level2 > li:hover .level3 {
    display: block;
    margin-top: -1px;
    margin-left: -3px;
    position: absolute;
    z-index: 3;
}
.topmenu .level2 > li:hover > a,
.topmenu .level2 > li > a:hover {
    background-color: #82a8e7;
    color: #fff;
}
.topmenu .level2 > .current > a,
.topmenu .level2 > .selected > a {
    background-color: #eceff4;
    border-color: #8c8282;
    color: #000;
    /*position: relative;*/
}
.topmenu .level3 {
    background-color: #eceff4;
    border: 1px solid #8c8282;
    border-style:dotted;
    display: none;
    margin: -1px 0 0 1px;
    min-width: 100%;
    padding: 2px 0;
    position: absolute;
    z-index: 3;
    top: 0;
    /*left: 190px;*/
    left: 99%; 
}
.topmenu .level3 a {
    color: #1a1a1a;
    display: block;
    padding: 6px 22px;
    white-space: nowrap;
    margin-top: -1px;
}
.topmenu .level3 a:hover {
    background-color: #c6dafb;
	 margin-top: -1px;
    /*margin-left: 10em; */
}
.topmenu .level3 .current a {
    text-decoration: underline;
}
 
.side nav {
    margin-top: 15px;
    margin-bottom: 25px;
    font-size: 10px;
}
.side nav ul {
    list-style: none;
}
.side nav a {
    border-top: 1px solid #8c8282;
    color: #1a1a1a;
    display: block;
    padding: 5px 20px;
}
.side nav a:hover {
    background-color: #f3f3f3;
}
.side nav .current > a {
    background-color: #fff;
    color: #1a1a1a;
}
.side nav .level1 {
    border-bottom: 1px solid #8c8282;
}
.side nav .level1 > li > a {
    font-weight: bold;
}
.side nav .level1 > .subnodes > a {
    background-image: url(img/icon_down.gif);
    background-position: 5px center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #8c8282;
}
.side nav .level1 > .selected > a {
    background-color: #fff;
}
.side nav .level2 {
    margin-left: 15px;
}
.side nav .level2 > li > a {
    border-top-color: #8c8282;
}
.side nav .level2 > li:first-child > a {
    border-top: none;
}
.side nav.collapse .level2 { /* "collapse" class force menu to hide 2nd level until parent or child is not selected */
    display: none;
}
.side nav.collapse .current .level2,
.side nav.collapse .selected .level2 { /* displaying 2nd level */
    display: block;
}
.side nav.collapse .level1 > .subnodes > a { /* fixing style when collapsed */
    background-image: url(img/icon_right.gif);
    background-position: 8px center;
    border-bottom: none;
}
.side nav.collapse .level1 > .subnodes.current > a,
.side nav.collapse .level1 > .subnodes.selected > a { /* fixing style when not collapsed */
    background-image: url(img/icon_down.gif);
    background-position: 5px center;
    border-bottom: 1px solid #8c8282;
}
.side nav .level3 {
    margin-left: 25px;
}
.side nav .level3 > li > a {
    border-top-color: #8c8282;
}
.side nav .level3 > li:first-child > a {
    border-top: none;
}
 
.slideShow {
	 margin-top: 10px;
	 margin-bottom: 5px;
	 height: 120px;
}
.breadcrumb {
	 margin-top: 15px;
    margin-bottom: 15px;
}
.breadcrumb a {
    color: #000;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.video {
	margin: 18px 0;
	padding: 20px 13px 10px 20px;
	border: 1px solid; color: #8c8282;
	border-radius: 5px;
	width: 586px;
	overflow: auto;
	z-index: 1;
}
 
.contact {
   background-image: url(img/contact.png);
 
	}
.wrapper > footer a {
    color: #019bd4;
}
.wrapper > footer a:hover {
    text-decoration: underline;
}

So any help you can give would be great.

best regards

Alan

Here

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Looking quickly at the site,

Looking quickly at the site, I would make use of the class current.

.side nav  .current ul{ 
  display:block;
}
.side nav .current ul ul{ /* hide the next level down */
  display:none;
}

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

Hi again !! Making progress

Hi again !!

Making progress !!!!

I managed to get the 3rd level to collapse by adding "li" to the ".side nav.collapse .level3 display: none;" function as

.side nav.collapse .level3 > li { /* "collapse" class force menu to hide 3rd level until parent or child is not selected */
    display: none;
}

now I cannot get the 3rd level to reappear when the 2nd level parent is selected.

You can see this on

http://www.megantech.pl/en/top/micro-fluidics/micro-fluidic-accessories/

The arrow icons work when you click on the 2nd level, and you can see a change in the borders under the arrows, so now it just a problem of getting the block to reappear. If I add li to the display: block; it does not work.

I have also tried "ul" in both cases but that does not work.

Alan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Alan, I think you would be

Hi Alan,
I think you would be best hiding and showing the ul not the LI.

If what I posted above in comment #11 didn't work then it wasn't specific enough.

Try adding the collapse class, if that dosen't work leave it in there so I can see what overrides it.

.side nav.collapse  .current ul{ 
  display:block;
}
.side nav.collapse .current ul ul{ /* hide the next level down */
  display:none;
}

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

hi Tony I have tried the

hi Tony

I have tried the above suggestion on localhost and it did nothing.

But what I have noticed is that when I inspect the page in Chrome, then it appears the 3rd level ul is not created.screen1.png

When I look at the source code for this page the level 3 ul is there - could this be a problem thta somehow I am not creating the 3rd level ?

        <div class="side grid_3 left">
            <nav class="collapse">                
<ul class="level1">
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/about/"  title="About">About</a></li>
  <li class="selected subnodes typeDefault"><a href="http://localhost/ip23/en/top/chemical-reactors/"  title="Chemical Reactors">Chemical Reactors</a>
<ul class="level2">
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/chemical-reactors/atmospheric-reactors/"  title="Atmospheric Reactors">Atmospheric Reactors</a></li>
  <li class="selected subnodes typeDefault"><a href="http://localhost/ip23/en/top/chemical-reactors/pressure-reactors/"  title="Pressure Reactors">Pressure Reactors</a>
<ul class="level3">
  <li class="current typeDefault"><a href="http://localhost/ip23/en/top/chemical-reactors/pressure-reactors/200bar-atlas-na/"  title="200bar Atlas Na">200bar Atlas Na</a></li>
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/chemical-reactors/pressure-reactors/3bar-atlas-glass/"  title="3bar Atlas Glass">3bar Atlas Glass</a></li>
</ul>
</li>
</ul>
</li>
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/flow-chemistry/"  title="Flow Chemistry">Flow Chemistry</a></li>
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/micro-fluidics/"  title="Micro Fluidics">Micro Fluidics</a></li>
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/graphene/"  title="Graphene">Graphene</a></li>
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/consult/"  title="Consult">Consultancy</a></li>
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/contact/"  title="Contact">Contact</a></li>
</ul>
 
<ul class="level2">
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/chemical-reactors/atmospheric-reactors/"  title="Atmospheric Reactors">Atmospheric Reactors</a></li>
  <li class="selected subnodes typeDefault"><a href="http://localhost/ip23/en/top/chemical-reactors/pressure-reactors/"  title="Pressure Reactors">Pressure Reactors</a>
<ul class="level3">
  <li class="current typeDefault"><a href="http://localhost/ip23/en/top/chemical-reactors/pressure-reactors/200bar-atlas-na/"  title="200bar Atlas Na">200bar Atlas Na</a></li>
  <li class="typeDefault"><a href="http://localhost/ip23/en/top/chemical-reactors/pressure-reactors/3bar-atlas-glass/"  title="3bar Atlas Glass">3bar Atlas Glass</a></li>
</ul>
</li>
</ul>

I really appreciate your help.

Alan

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

one more thing !

Tony

Having looked a little further, it seems thta level 3 has been created as a subnode of level2 rather than directly under
the collpase class

screen2.png

Alan

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 17 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Level3 looks how I would

Level3 looks how I would expect it, level2 is in the wrong place.
Forcing this menu to have an extra level may not be worth the hassel.
It might be the JavaScript you need to mess with to get it working.

Have you looked around for others that may be structured better.

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

Thanks very much

Tony

Thanks very much for all your help, I think you are right, I will look somewhere else

Alan

alanek
alanek's picture
Offline
Regular
Poland
Last seen: 7 years 24 weeks ago
Poland
Timezone: GMT+2
Joined: 2012-04-29
Posts: 15
Points: 17

FIXED IT !!!!!!

Tony

The guys at impresspages finally got around to it, for him it must be a simple as pie.

I was missing 2 ">"

The code I cut, pasted and modified from the 2nd level has no > between .current and .level

.side nav.collapse .current .level2,
.side nav.collapse .selected .level2 { /* displaying 2nd level */
    display: block;
}

What I should have had is

.side nav.collapse .current > .level3,  
.side nav.collapse .selected > .level3   { /* displaying 3rd level */
    display: block;
}

with the 2 ">"

I have been going mad for days on this one, I cannot remember why I could not hide the level in the first place, it was all too much for me. A happy ending anyway.

Thanks again for all your help.

Alan