Resource Side menu with nested menu

[Sana Natsuko]

[div class=page] [div class=pageTitle]A Simple Test (Now working with mobile!)[/div] [div class=pageSideMenu] [div class=pageMenuTitle]First Tabs[/div] [div class="pageMenuTab pageMenuAbout pageBold"]About[/div] [div class="pageMenuTab pageMenuUsed"]What can it be used for?[/div] [div class="pageMenuTab pageMenuMade"]How was it made?[/div] [div class=pageMenuTitle]Second Tabs[/div] [div class="pageMenuTab pageMenuCustomise"]Is it hard to customise tabs?[/div] [div class="pageMenuTab pageMenuMost"]What did you use the most?[/div] [div class=pageMenuTitle]Third Tabs[/div] [div class="pageMenuTab pageNestedFeatures"]Other Features ▼[/div] [div class="pageNestedTab pageNestedTabMenu pageNestedMultiple"]Can you make a multiple section tab?[/div] [div class="pageNestedTab pageNestedTabMenu pageNestedHow"]How can you make one?[/div] [div class="pageMenuTab pageNestedContent"]Extra Content ▼[/div] [div class="pageNestedTab pageNestedTabExtraContent pageNestedTest1"]If I manage to make this work, I probably did it in a harder way than needed[/div] [div class="pageNestedTab pageNestedTabExtraContent pageNestedTest2"]Edits[/div] [/div] [div class="pageInformation pageAbout"]This was inspired off the BBCode+ guide, when it was mentioned that the menu was made using BBCode+. Like I read that he made it with BBCode+ and thought to myself... That sound fun, now what I actually got was both a mix of fun challenges and painful hours of looking how to fix errors. Some noteable ones that stumped me for a while would be, the bold. When you click on the side menu, as a way to show you which menu your on, I decided to make it so the little header on the side goes bold. But little did I know at the time that it meant making a class to add to the headers and remove to make them bold.

Another annoying error was that I had the nested tabs as children of the nested header, for example 'How can you make one' was a child of 'Other Features'. This also made it so if you hovered over any of the children or parents, they would all highlight to make it seem they have all been selected because children inherit from the parent. So I had the fun of remembering children inherit, despite that being obvious while trying multiple other ways to not fix the problem.[/div] [div class="pageInformation pageUsed"]As for what this can be used for, I couldn't really tell you. Since I made it with more practice and personal interest in mind, what people could this for roleplay wise would be interesting. If I was to come up with some off the top of my head I would suggest maybe making an entire form post explaing the world of your roleplay. If you changed the titles for different areas 'North, West, South and East' for example, you could then make the small headers areas in those general directions and what its like there. Again I am just guessing, if you can think of anything cool to do with it involving roleplay I would love to see it.[/div] [div class="pageInformation pageMade"]I made this by using lots and lots (probably too many), classes. The main classes that need noting are the 'pageMenuTab', 'pageNestingTab', 'pageMenuTitle', 'pageSlideMenu' and 'pageInformation. The 'pageMenuTab' is the most used tab in the code, it is the class given to all the side menu's, basically meaning when you hover them, they will go grey and the cursor will change, it is also what gives them all their normal properties and such. The 'pageNestingTab' is the nested alternative to 'pageMenuTab' and does the exact same thing, but for the nested menu's. The 'pageMenuTitle' gives all the properties to the titles separating the menus and the 'pageSlidemenu' is the overall div containing all of the other elements inside. Finally the 'pageInformation', this like all the other classes gives the element that you are reading now its properties and what not, but it also is hidden everytime you click on a side menu, so that all the menus don't open up below the last one you opened.[/div] [div class="pageInformation pageCustomise"]The customisation of the tabs shouldn't be too hard. If you wanted to change the colour of the titles or backgrounds, there is the 'page' class which gives you the entire background and the 'pageMenuTitle'. It depends on what you would really want to change about the menu, the sizes could be a bit more difficult, but still doable, but if you wanted to make the tabs appear on the top and not the side, it would be better starting from scratch and just using similar code.[/div] [div class="pageInformation pageMost"]Classes and scripts, there isn't drastic changes in either the classes or the scripts, but from my point in time of looking at it, all of the classes have a unique property to make the tabs work and without one, there would be a pretty obvious bug or error somewhere. As for the script, it was just the same script referencing different classes. If I find a way to make the code smaller and easier to understand I might come back to this and change it for my own sake of reusing it later.[/div] [div class="pageInformation pageMultiple"]You best believe you can! It took a bit of messing around, but overall if you can make tabs normally, you can make nested menus too.[/div] [div class="pageInformation pageHow"]There isn't much difference, just make it so when you click on the div, instead of taking you to the content immediately, it shows more div's with the same properties of before.[/div] [div class="pageInformation pageTest1"]If you could notice I was running out of stuff to type, these two are literally just tests[/div] [div class="pageInformation pageTest2"]I have now made it work... Okayish for mobile, its not as bad as before. You can now actually read the side menu and the information that comes with it, the one annoying thing is if your on about the words wrap around the text which is good, but when you open the nested menu's it moves the words and I just don't like how it looks. but oh well, whats done is done. Mobile compatible! Edit: 13/12/19. I have added transitions to make the hover look smoother and also messed around with the margin so content in the main space doesn't go below the side menu. Which also meant if you opened up a nested menu it would push the information to the side. Ew! I also adjusted this for mobile too, your welcome phone users![/div] [/div] [class name=page] box-sizing: border-box; [/class] [class name=pageBold] font-weight: bold; [/class] [class name=pageTitle] color: #2F97E3; [/class] [class name=pageSideMenu] float: left; width: 15%; [/class] [class name=pageSideMenu maxWidth=640px] width: 40%; [/class] [class name=pageMenuTab] margin-top: 10px; width: 40%; transition: color .25s; [/class] [class name=pageMenuTab maxWidth=640px] width: 70%; [/class] [class name=pageMenuTitle] color: #2F97E3; [/class] [class name=pageInformation] margin-left: 230px; width: 80%; font-size: 18px; [/class] [class name=pageInformation maxWidth=640px] margin-left: 156px; width: 60%; font-size: 14px; [/class] [class name=pageNestedTab] display: none; margin: 10px 0; margin-left: 10px; transition: color .25s; [/class] [class name=pageMenuTab state=hover] color: #B1B1B1; cursor: pointer; [/class] [class name=pageNestedTab state=hover] color: #B1B1B1; cursor: pointer; [/class] [script class=page on=init] hide pageInformation show pageAbout [/script] [script class=pageMenuAbout on=click] hide pageInformation removeClass pageBold pageMenuTab removeClass pageBold pageNestedTab addClass pageBold pageMenuAbout show pageAbout [/script] [script class=pageMenuUsed on=click] hide pageInformation removeClass pageBold pageMenuTab removeClass pageBold pageNestedTab addClass pageBold pageMenuUsed show pageUsed [/script] [script class=pageMenuMade on=click] hide pageInformation removeClass pageBold pageMenuTab removeClass pageBold pageNestedTab addClass pageBold pageMenuMade show pageMade [/script] [script class=pageMenuCustomise on=click] hide pageInformation removeClass pageBold pageMenuTab removeClass pageBold pageNestedTab addClass pageBold pageMenuCustomise show pageCustomise [/script] [script class=pageMenuMost on=click] hide pageInformation removeClass pageBold pageMenuTab removeClass pageBold pageNestedTab addClass pageBold pageMenuMost show pageMost [/script] [script class=pageNestedFeatures on=click] slideToggle 750 pageNestedTabMenu [/script] [script class=pageNestedMultiple on=click] hide pageInformation removeClass pageBold pageMenuTab removeClass pageBold pageNestedTab addClass pageBold pageNestedMultiple show pageMultiple [/script] [script class=pageNestedHow on=click] hide pageInformation removeClass pageBold pageMenuTab removeClass pageBold pageNestedTab addClass pageBold pageNestedHow show pageHow [/script] [script class=pageNestedContent on=click] slideToggle 750 pageNestedTabExtraContent [/script] [script class=pageNestedTest1 on=click] hide pageInformation removeClass pageBold pageMenuTab removeClass pageBold pageNestedTab addClass pageBold pageNestedTest1 show pageTest1 [/script] [script class=pageNestedTest2 on=click] hide pageInformation removeClass pageBold pageMenuTab removeClass pageBold pageNestedTab addClass pageBold pageNestedTest2 show pageTest2 [/script]

Spoiler

[nobr]
    [div class=page]
        [div class=pageTitle][h]A Simple Test (Now working with mobile!)[/h][/div]
        [divide=thick][/divide]
        [div class=pageSideMenu]
            [div class=pageMenuTitle][sh]First Tabs[/sh][/div]
            [div class="pageMenuTab pageMenuAbout pageBold"]About[/div]
            [div class="pageMenuTab pageMenuUsed"]What can it be used for?[/div]
            [div class="pageMenuTab pageMenuMade"]How was it made?[/div]

            [div class=pageMenuTitle][sh]Second Tabs[/sh][/div]
            [div class="pageMenuTab pageMenuCustomise"]Is it hard to customise tabs?[/div]
            [div class="pageMenuTab pageMenuMost"]What did you use the most?[/div]

            [div class=pageMenuTitle][sh]Third Tabs[/sh][/div]
            [div class="pageMenuTab pageNestedFeatures"]Other Features ▼[/div]
            [div class="pageNestedTab pageNestedTabMenu pageNestedMultiple"]Can you make a multiple section tab?[/div]
            [div class="pageNestedTab pageNestedTabMenu pageNestedHow"]How can you make one?[/div]
            [div class="pageMenuTab pageNestedContent"]Extra Content ▼[/div]
            [div class="pageNestedTab pageNestedTabExtraContent pageNestedTest1"]This is just here to show you can use more than one multiple selection tab[/div]
            [div class="pageNestedTab pageNestedTabExtraContent pageNestedTest2"]If I manage to make this work, I probably did it in a harder way than needed[/div]
        [/div]

    [div class="pageInformation pageAbout"]This was inspired off the BBCode+ guide, when it was mentioned that the menu was made using BBCode+. Like I read that he made it with BBCode+ and thought to myself... That sound fun, now what I actually got was both a mix of fun challenges and painful hours of looking how to fix errors. Some noteable ones that stumped me for a while would be, the bold. When you click on the side menu, as a way to show you which menu your on, I decided to make it so the little header on the side goes bold. But little did I know at the time that it meant making a class to add to the headers and remove to make them bold.[br][/br][br][/br] Another annoying error was that I had the nested tabs as children of the nested header, for example 'How can you make one' was a child of 'Other Features'. This also made it so if you hovered over any of the children or parents, they would all highlight to make it seem they have all been selected because children inherit from the parent. So I had the fun of remembering children inherit, despite that being obvious while trying multiple other ways to not fix the problem.[/div]
    [div class="pageInformation pageUsed"]As for what this can be used for, I couldn't really tell you. Since I made it with more practice and personal interest in mind, what people could this for roleplay wise would be interesting. If I was to come up with some off the top of my head I would suggest maybe making an entire form post explaing the world of your roleplay. If you changed the titles for different areas 'North, West, South and East' for example, you could then make the small headers areas in those general directions and what its like there. Again I am just guessing, if you can think of anything cool to do with it involving roleplay I would love to see it.[/div]
    [div class="pageInformation pageMade"]I made this by using lots and lots (probably too many), classes. The main classes that need noting are the 'pageMenuTab', 'pageNestingTab', 'pageMenuTitle', 'pageSlideMenu' and 'pageInformation. The 'pageMenuTab' is the most used tab in the code, it is the class given to all the side menu's, basically meaning when you hover them, they will go grey and the cursor will change, it is also what gives them all their normal properties and such. The 'pageNestingTab' is the nested alternative to 'pageMenuTab' and does the exact same thing, but for the nested menu's. The 'pageMenuTitle' gives all the properties to the titles separating the menus and the 'pageSlidemenu' is the overall div containing all of the other elements inside. Finally the 'pageInformation', this like all the other classes gives the element that you are reading now its properties and what not, but it also is hidden everytime you click on a side menu, so that all the menus don't open up below the last one you opened.[/div]

    [div class="pageInformation pageCustomise"]The customisation of the tabs shouldn't be too hard. If you wanted to change the colour of the titles or backgrounds, there is the 'page' class which gives you the entire background and the 'pageMenuTitle'. It depends on what you would really want to change about the menu, the sizes could be a bit more difficult, but still doable, but if you wanted to make the tabs appear on the top and not the side, it would be better starting from scratch and just using similar code.[/div]
    [div class="pageInformation pageMost"]Classes and scripts, there isn't drastic changes in either the classes or the scripts, but from my point in time of looking at it, all of the classes have a unique property to make the tabs work and without one, there would be a pretty obvious bug or error somewhere. As for the script, it was just the same script referencing different classes. If I find a way to make the code smaller and easier to understand I might come back to this and change it for my own sake of reusing it later.[/div]
 
    [div class="pageInformation pageMultiple"]You best believe you can! It took a bit of messing around, but overall if you can make tabs normally, you can make nested menus too.[/div]
    [div class="pageInformation pageHow"]There isn't much difference, just make it so when you click on the div, instead of taking you to the content immediately, it shows more div's with the same properties of before.[/div]

    [div class="pageInformation pageTest1"]If you could notice I was running out of stuff to type, these two are literally just tests[/div]
    [div class="pageInformation pageTest2"]I have now made it work... Okayish for mobile, its not as bad as before. You can now actually read the side menu and the information that comes with it, the one annoying thing is if your on about the words wrap around the text which is good, but when you open the nested menu's it moves the words and I just don't like how it looks. but oh well, whats done is done. Mobile compatible![/div]
    [/div]

    [class name=page]
        box-sizing: border-box;
    [/class]

    [class name=pageBold]
        font-weight: bold;
    [/class]

    [class name=pageTitle]
        color: #2F97E3;
    [/class]

    [class name=pageSideMenu]
        float: left;
        width: 15%;
    [/class]

    [class name=pageSideMenu maxWidth=640px]
        width: 40%;
    [/class]

    [class name=pageMenuTab]
        margin-top: 10px;
        width: 40%;
    [/class]

    [class name=pageMenuTab maxWidth=640px]
        width: 70%;
    [/class]

    [class name=pageMenuTitle]
        color: #2F97E3;
    [/class]

    [class name=pageInformation]
        width: 90%;
        font-size: 18px;
    [/class]

    [class name=pageInformation maxWidth=640px]
        width: 100%;
        font-size: 14px;
    [/class]

    [class name=pageNestedTab]
        display: none;
        margin: 10px 0;
        margin-left: 10px;
    [/class]

    [class name=pageMenuTab state=hover]
        color: #B1B1B1;
        cursor: pointer;
    [/class]

    [class name=pageNestedTab state=hover]
        color: #B1B1B1;
        cursor: pointer;
    [/class]

    [script class=page on=init]
        hide pageInformation
        show pageAbout
    [/script]

    [script class=pageMenuAbout on=click]
        hide pageInformation
        removeClass pageBold pageMenuTab
        removeClass pageBold pageNestedTab
        addClass pageBold pageMenuAbout
        show pageAbout
    [/script]

    [script class=pageMenuUsed on=click]
        hide pageInformation
        removeClass pageBold pageMenuTab
        removeClass pageBold pageNestedTab
        addClass pageBold pageMenuUsed
        show pageUsed
    [/script]

    [script class=pageMenuMade on=click]
        hide pageInformation
        removeClass pageBold pageMenuTab
        removeClass pageBold pageNestedTab
        addClass pageBold pageMenuMade
        show pageMade
    [/script]

    [script class=pageMenuCustomise on=click]
        hide pageInformation
        removeClass pageBold pageMenuTab
        removeClass pageBold pageNestedTab
        addClass pageBold pageMenuCustomise
        show pageCustomise
    [/script]

    [script class=pageMenuMost on=click]
        hide pageInformation
        removeClass pageBold pageMenuTab
        removeClass pageBold pageNestedTab
        addClass pageBold pageMenuMost
        show pageMost
    [/script]

    [script class=pageNestedFeatures on=click]
        slideToggle 750 pageNestedTabMenu
    [/script]

    [script class=pageNestedMultiple on=click]
        hide pageInformation
        removeClass pageBold pageMenuTab
        removeClass pageBold pageNestedTab
        addClass pageBold pageNestedMultiple
        show pageMultiple
    [/script]

    [script class=pageNestedHow on=click]
        hide pageInformation
        removeClass pageBold pageMenuTab
        removeClass pageBold pageNestedTab
        addClass pageBold pageNestedHow
        show pageHow
    [/script]

    [script class=pageNestedContent on=click]
        slideToggle 750 pageNestedTabExtraContent
    [/script]

    [script class=pageNestedTest1 on=click]
        hide pageInformation
        removeClass pageBold pageMenuTab
        removeClass pageBold pageNestedTab
        addClass pageBold pageNestedTest1
        show pageTest1
    [/script]

    [script class=pageNestedTest2 on=click]
        hide pageInformation
        removeClass pageBold pageMenuTab
        removeClass pageBold pageNestedTab
        addClass pageBold pageNestedTest2
        show pageTest2
    [/script]

[/nobr]