Dropdown implementation

[Spyre]

Hello there, I'm trying to add a drop-down menu to my site using html and css. It should be in this format(Shouldn't look exactly like this, its just the placement that I'm referring to):



Here's what I've got so far:

  Spoiler: HTML Code 

<div class="dropdown">
<ul class="dropdown_menu">
<li><a href='#'><img src="/templates/icons/IMAGEHERE.png">Pets</a>
    <ul>
        <li>
            <a href="/adopt"><img src="/templates/icons/IMAGEHERE.png">Adopt a Pet</a>
        </li>
       
        <li>
            <a href="/myadopts"><img src="/templates/icons/IMAGEHERE.png">My Pets</a>
        </li>
       
        <li>
            <a href="/pound"><img src="/templates/icons/IMAGEHERE.png">Pound</a>
        </li>
       
        <li>
            <a href="/levelup/daycare"><img src="/templates/icons/IMAGEHERE.png">Daycare</a>
        </li>
    </ul>
</li>
<li><a href='#'><img src="/templates/icons/IMAGEHERE.png">Bag</a>
    <ul>
        <li>
            <a href="/inventory"><img src="/templates/icons/IMAGEHERE.png">Inventory</a>
        </li>
       
        <li>
            <a href="/trade"><img src="/templates/icons/IMAGEHERE.png">Trades</a>
        </li>
    </ul>
</li>
<li><a href='#'><img src="/templates/icons/IMAGEHERE.png">Community</a>
    <ul>
        <li>
            <a href="/shoutbox"><img src="/templates/icons/IMAGEHERE.png">Chat</a>
        </li>
       
        <li>
            <a href="/tos"><img src="/templates/icons/IMAGEHERE.png">Rules</a>
        </li>
       
        <li>
            <a href="/stats"><img src="/templates/icons/IMAGEHERE.png">Stats</a>
        </li>
       
        <li>
            <a href="/profile"><img src="/templates/icons/IMAGEHERE.png">Members List</a>
        </li>
    </ul>
</li>

<li><a href='/search'><img src="/templates/icons/IMAGEHERE.png">Search</a></li>

<li><a href='#'><img src="/templates/icons/IMAGEHERE.png">Account</a>
    <ul>
        <li>
            <a href="/account"><img src="/templates/icons/IMAGEHERE.png">Settings</a>
        </li>
       
        <li>
            <a href="/promo"><img src="/templates/icons/IMAGEHERE.png">Promocodes</a>
        </li>
    </ul>
</li>

</ul>
</div>

However I'm not understanding how you add stuff inside {$document_content} under Body HTML: when updating a theme.

I tried adding the code before {$document_content} in the admin control panel but adding HTML into the Body HTML: box seems to be messy since it doesn't keep the formatting when copy pasting into it and I have to add tabs as 4 spaces manually. Plus it ruins how clean and readable the template.tpl file is.

Even then when adding it succesfully it doesn't appear in the correct spot, how do I place it where the default ddmenu is, or how do I edit the default one to look like the image I posted?

Thanks for the help!

PS: If there's any Mysidia Adoptables discord server that has people experienced with the script please send over an invite! I'd love to talk to people who are familiar with it, and are willing to help beginners!

 

[GeneticAlpha]

Hello there, I'm trying to add a drop-down menu to my site using html and css. It should be in this format(Shouldn't look exactly like this, its just the placement that I'm referring to):
View attachment 352


Here's what I've got so far:

  Spoiler: HTML Code 

<div class="dropdown">
<ul class="dropdown_menu">
<li><a href='#'><img src="/templates/icons/IMAGEHERE.png">Pets</a>
    <ul>
        <li>
            <a href="/adopt"><img src="/templates/icons/IMAGEHERE.png">Adopt a Pet</a>
        </li>
      
        <li>
            <a href="/myadopts"><img src="/templates/icons/IMAGEHERE.png">My Pets</a>
        </li>
      
        <li>
            <a href="/pound"><img src="/templates/icons/IMAGEHERE.png">Pound</a>
        </li>
      
        <li>
            <a href="/levelup/daycare"><img src="/templates/icons/IMAGEHERE.png">Daycare</a>
        </li>
    </ul>
</li>
<li><a href='#'><img src="/templates/icons/IMAGEHERE.png">Bag</a>
    <ul>
        <li>
            <a href="/inventory"><img src="/templates/icons/IMAGEHERE.png">Inventory</a>
        </li>
      
        <li>
            <a href="/trade"><img src="/templates/icons/IMAGEHERE.png">Trades</a>
        </li>
    </ul>
</li>
<li><a href='#'><img src="/templates/icons/IMAGEHERE.png">Community</a>
    <ul>
        <li>
            <a href="/shoutbox"><img src="/templates/icons/IMAGEHERE.png">Chat</a>
        </li>
      
        <li>
            <a href="/tos"><img src="/templates/icons/IMAGEHERE.png">Rules</a>
        </li>
      
        <li>
            <a href="/stats"><img src="/templates/icons/IMAGEHERE.png">Stats</a>
        </li>
      
        <li>
            <a href="/profile"><img src="/templates/icons/IMAGEHERE.png">Members List</a>
        </li>
    </ul>
</li>

<li><a href='/search'><img src="/templates/icons/IMAGEHERE.png">Search</a></li>

<li><a href='#'><img src="/templates/icons/IMAGEHERE.png">Account</a>
    <ul>
        <li>
            <a href="/account"><img src="/templates/icons/IMAGEHERE.png">Settings</a>
        </li>
      
        <li>
            <a href="/promo"><img src="/templates/icons/IMAGEHERE.png">Promocodes</a>
        </li>
    </ul>
</li>

</ul>
</div>

However I'm not understanding how you add stuff inside {$document_content} under Body HTML: when updating a theme.

I tried adding the code before {$document_content} in the admin control panel but adding HTML into the Body HTML: box seems to be messy since it doesn't keep the formatting when copy pasting into it and I have to add tabs as 4 spaces manually. Plus it ruins how clean and readable the template.tpl file is.

Even then when adding it succesfully it doesn't appear in the correct spot, how do I place it where the default ddmenu is, or how do I edit the default one to look like the image I posted?

Thanks for the help!

PS: If there's any Mysidia Adoptables discord server that has people experienced with the script please send over an invite! I'd love to talk to people who are familiar with it, and are willing to help beginners!

Discord Sever Here you go!

 

[Hall of Famer]

You can change the links on the dropdown menu in ACP.



The CSS can be modified by editing file /css/menu.css.

 

[Spyre]

Thanks. What would be the recommended way I go about adding icons next to each option then?

 

[GeneticAlpha]

Thanks. What would be the recommended way I go about adding icons next to each option then?

I couldn't find an area that would allow me to add HTML in for beside the text in the links. I think it would be in class_menu.php, but I couldn't get it to accept the icon beside the text in the nav links. You might have to build a navigation from scratch to get more customizability. But Famer might could help you with the default navigation.