drop-down-menu,typo3,typoscript , Typoscript HMENU drop down is not working, <li>-Tag closes to early


Typoscript HMENU drop down is not working,
  • -Tag closes to early
  • Question:

    Tag: drop-down-menu,typo3,typoscript

    Got the following - reduced to a minimum - code:

    CSS:

        html {
        height: 100%;
        }
         
        body {
        height: 100%;
        font-size: 1.5em;
        line-height: 1.5;
        font-family: Arial, Verdana, Helvetica, sans-serif;
        }
         
         
        a, a:link, a:active, a:visited {
        color: #e23427;
        text-decoration: none;
        }
         
        li {
        list-style: none;
        }
         
        /**1. Ebene Hauptnavigation**/
        ul.topNav {
        float: left;
        width: 700px;
        margin: 100px 0 0 40px;
         
        }
        ul.topNav li {
        float: left;
        position: relative;
        }
        ul.topNav li a.tmp {
        color: inherit;
        float: left;
        height: 20px;
        padding: 0 10px;
        }
        ul.topNav li a:hover.tmp,
        ul.topNav li.active a.tmp,
        ul.topNav li:hover a.tmp {
        border-bottom: 2px solid #e23427;
        padding-bottom:10px;
        color: #e23427;
        }
         
        /**2. Ebene Hauptnavigation**/
        ul.topNav li ul {
        display: none;
        position: absolute;
        width: 190px;
        top: 32px;
        left: -2px;
        padding: 5px 2px 2px 2px;
        }
        ul.topNav li:hover ul {
        display: block;
        }
        ul.topNav li ul li {
        float: none;
        display: block;
        width: 190px;
        height: auto;
        vertical-align: middle;
        }
        ul.topNav li ul li a {
        display: block;
        color: #231f20;
        width: 146px;
        padding: 6px 22px;
        }
        ul.topNav li ul li a:hover,
        ul.topNav li ul li a.active {
        color: red;
        }
         
        /***3. Ebene Hauptnavigation***/
        ul.topNav li:hover ul li ul {
        display: none;
        position: absolute;
        width: 190px;
        left: 188px;
        padding: 0 2px 2px 2px;
        margin-top: -32px;
        }
        ul.topNav li.eb3Left:hover ul li ul {
        left: -192px;
        }
        ul.topNav li a:hover ul li ul {
        display: none;
        }
        ul.topNav li ul li ul {
        display: none;
        }
        ul.topNav li ul li:hover ul {
        display: block;
        }
        <!DOCTYPE html>
        <html>
        <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="style/testCssNavigation.css" media="screen" />
        </head>
         
        <body>
        <div>
        <ul class="topNav">
        <li><a href="" class="tmp">Company</a>
         
        <ul>
        <li><a href="">Facts</a></li>
        <li><a href="">Overview</a></li>
        <li><a href="">Management</a></li>
        </ul>
        </li>
        <li><a href="" class="tmp">Products</a>
         
        <ul>
        <li><a href="">Product Line</a>
        <ul>
        <li><a href="">Product1</a></li>
        <li><a href="">Product2</a></li>
        <li><a href="">Product3</a></li>
        </ul>
        </li>
        </ul>
        </li>
        </ul>
        </div>
        </body>
        </html>

    Works well as you can see: First level, second and third level too.

    By integrating it into Typo3 I wrote the following TS for the menu:

        ## Menu [Begin]
        lib.mainnav = HMENU
        lib.mainnav {
        entryLevel = 1
    
        1 = TMENU
        1 {
        wrap = <ul class="topNav">|</ul>
        expAll = 1
        noBlur = 1
    
        ##Menuelements normal
        NO = 1
        NO.allWrap = <li>|</li>
        NO.ATagParams = class="tmp"
        NO.stdWrap.htmlSpecialChars = 1
    
        CUR = 1
        CUR.allWrap = <li>|</li>
        CUR.ATagParams = class="tmp"
        CUR.stdWrap.htmlSpecialChars = 1
        }
    
        2 = TMENU
        2 {
        wrap = <ul>|</ul>
        expAll = 1
        noBlur = 1
    
        NO = 1
        NO.wrapItemAndSub = <li>|</li>
        NO.stdWrap.htmlSpecialChars = 1
    
        CUR = 1
        CUR.wrapItemAndSub = <li>|</li>
        CUR.stdWrap.htmlSpecialChars = 1
    
        ACT = 1
        ACT < .CUR
        }
        ## referenz auf ebene 2, alles wie ebene 2
        3 < .2
        3.wrap = <ul>|</ul>
        }
        ## Menu [End]
    

    Via Typo3 I can only see the first level menu, no Drop Down and no third level. The generated code is the following:

        <div>
        <ul class="topNav">
        <li>
        <a href="index.php?id=112" class="tmp">Company</a>
        </li>
        <ul>
        <li>
        <a href="index.php?id=119">Facts</a>
        </li>
        <li>
        <a href="index.php?id=120">Overview</a>
        </li>
        <li>
        <a href="index.php?id=121">Management</a>
        </li>
        </ul>
         
        <li>
        <a href="index.php?id=114" class="tmp">Products</a>
        </li>
        <ul>
        <li>
        <a href="index.php?id=126">Product Line</a>
        </li>
        </ul>
        </ul>
        </div>

    The third level menu is missing completely and the first level has a closing -Tag immediately after but should close after second and third level menu, as I know.

    I am pretty new in this Nerd scene ;-) So if I did something wrong, please apologize. Would be great if someone could helf, am working for a hole while on this problem now...for days. :-)


    Answer:

    Only a partial answer, for the problem with the first menu level: You are using allWrap to add the <li> tag, which only wraps the menu item, but not the submenu. Use wrapItemAndSub instead, as you did on the second menu level. Link to documentation.

    Also, some indentions in the TypoScript would be nice.


    Related:


    Chain populate HTML select boxes using AJAX, PHP and MySQL


    php,jquery,mysql,ajax,drop-down-menu
    My special form has two select boxes. I got the first one populate with options from a MySQL database using PHP, during page loading stage. What I'm trying to achieve next is the following: By selecting one of the values from first pre-populated <select> box - the second <select> box...

    Show drop down menu onmousedown without loosing onclick functionality


    javascript,drop-down-menu,onclick,focus,onmousedown
    I try to get a drop down menu to work as most drop down menus seem to work, i.e. as soon as the mouse button is pressed on the trigger the drop menu shows up. Seems rather easy with some css and javascript but it turns out to be a...

    Simple dropdown not working on IE8


    jquery,drop-down-menu,internet-explorer-8
    I'm trying to make a simple dropdown menu with jquery but is not working for IE8, any ideas why ? I have already tried a couple of alternative solutions and I know that there are more simple ways to approach a simple dropdown but I really want to know why...

    Typo3 6.2: “Could not find a suitable type converter for ”String“ ” exeption after update


    php,typo3,typo3-6.2.x
    Typo3 was from a very old version updated to Typo3 6.2. The most things are working now, but I have one own written extension that give me the following error: Core: Exception handler (WEB): Uncaught TYPO3 Exception: #1297759968: Exception while property mapping at property path "":Could not find a suitable...

    How to make a Bootstrap radio button continue into a dropdown menu


    html,drop-down-menu,radio-button,bootstrap
    I would like to have a radio button with a couple options showing, and the rest available in a dropdown menu. I can get the interactions I want by assigning every option to a class, but I would like the color of the dropdown menu to change to the active...

    How to assign variable in fluid?


    typo3,fluid,view-helpers
    I want viewhelper that can be helpful to assign variable in fluid, I dont want variable to be passed from controller.

    How to populate a DropDownList in a DataGrid?


    c#,html,asp.net,drop-down-menu,datagrid
    I have a DataGrid that displays information about trailers. I decided to change the location column to a DropDownList so the location can be easily changed. But I am not sure how to populate the DropDownList. <asp:DataGrid runat="server" CssClass="tblResults" OnItemDataBound="dgList_ItemCreated" OnRowDataBound="OnRowDataBound" AllowSorting="true" OnSortCommand="dgTrailer_Sort" ID="dgTrailers" DataKeyField="ID" AutoGenerateColumns="false"> <Columns> <asp:BoundColumn DataField="TrailerOwner" HeaderText="Owner"...

    Making “Drop Down Menu” and “Head Menu” relative does not make de “Drop Down Menu” push down the “Head Menu” on hover


    jquery,html,css,drop-down-menu
    So again I am strugling with some problems. This time it is so that when I hover over the drop down menu from portfoilio (when the site is in mobile view mode) it will just go over the other elements, I tried making everything relative, removed the float and tried...

    Option Menu Not Working When I Add Javascript Function


    javascript,jquery,html,css,drop-down-menu
    I need help with an option menu not working when I add javascript. I found a tutorial for this type of drop-down menu and the menu/drop-down function is working except I can’t get it to do what I need when an option is selected. When "Not Free" is selected I...

    Hide options in dropdown select


    jquery,drop-down-menu
    I do not have access to adjust the options within a dropdown. So I want to hide them from the DOM. I am having trouble just hiding the option. Currently I can hide the entire dropdown, if my array consists of the countries I want to hide. https://jsfiddle.net/gmLa5bgz/ html <select...

    How can I make a “*required field” error message appear for a drop down menu in a validating PHP form?


    php,forms,validation,drop-down-menu,server-side
    I created a form using PHP. The form needs to be validated and it works for every field but the "rate our site" drop down menu. I'm using the same code from the form from other questions (name, email, etc.) for the "rate our site" drop down menu but the...

    Adding