Turn dbTopMenu into a select

Has someone does ths before..
Turn the dbTopMenu into a select instead of table row with href links?

The file: templates\base\designbox_menu_1.html is where i tried to change it.
The select isn't the hard part that works.
But the <option value="__action__" > __title__ </option> doesn't show real text.

Any help is helpful!!

you have to define the __action__ and __title__ variables. For this - you gotta find the correct .php page to add/edit these values. And that is provided it will even work the way you want it to.

 that is just my problem now.. the variable names are the freakin same like __title__ the return you get are 20+ php files to choose from. why is this feature not base (standard) i wonder.

Developers: where can i find the code for this to change?

In order to change "dbTopMenu" you should edit templates/base/designbox_menu_1.html file. Besides that, you will need to make an active element to be displayed first each time, which requires dbTopMenu logics edit. Here is a tutorial on how to make it. I will turn design box menu into a list instead of select as it is easier to style and do not require js to work as select does. The main idea is to always show an active element of a list and show the other items when it is hovered.

1. Go to Dolphin admin panel -> tools -> cache -> settings and disable "Enable Cache For CSS Files" and  "Enable Cache For JS Files" options. Then clear all cache.

HTML file was heavily changed, so just download a ready "designbox_menu_1.html" from "templates/tmpl_uni/" folder in the attachment and upload to your tmpl_*yourtemplate* directory.

2. We need to make an active item to go first. Find "Dolphin root/inc/classes/BxDolPageView.php" file and "getBlockCaptionItemCode" function in it. Paste the following code at the beginning of it on line 487:

3. The following on line 556 before "$bFirst = false;" string:

If you have troubles on any step you can look at ready files from the attachment.

Best regards, nuknspax.

nuknspax

thank you for the example and script. But I have custum template and i can't get it to work!
Does this work on your site? Do you have screenshots?

Keep in mind that the hover pseudo class does not behave well on all mobile devices, while selectors do.

that is why i want select on edit profile page and timeline dbtopmenu
I wonder if someone has done it on there site..?

My bad, I included the wrong html file in the package, sorry. Use the one attached here. Here is the demo:

http://nuknspax.com/d71/index.php?skin=uni

I must say "WOW" I really like the way that looks. And sorry in advance - as I will be using this tip. Seeing as how this is a great idea (especially for those like myself who have custom modules with quite a few of those links), your solution makes everything look a lot cleaner. Would you mind posting this in the Tips, Tricks, and Sharing thread? Or can a mod move this over? This is very useful info.

@HL. I looked on different devices, and I did have a slight issue with the ipad. Apparently, to get the dropdown items to display, I have to click the button and slide my finger down for the options to display. Not too big of an issue. On my Note, with the S-Pen, just hovering over the button with the oen shows the options.

 re

 It doesn't work on my Surface I

 re

 I'm doing it for the mobile template I'm building, The forum pages are easy... the rest is a little more involved. Unfortunately, the work I've done is on a hdd sitting on my kitchen counter, while the rest of the laptop is in the repair shop.

instead of first example here is my select form for testing.

Please give me feedback

nuknspax thank you for your dbtopmenu code. It looks and works nice.
I made it into a selector to see if that would be easier on a smartphone. (still tweaking tho..)

this comes from the designbox_menu_2.html.
in pc/laptop browsers is works fine, but on smartphone it doesn't!!
don't worry about the <td> i'm still tweaking.

What could it be...
Code below
_______________________________________________

<div id="dbTopMenu__id__" class="dbTopMenu">
    <div class="dbTmCenter">
        <div id="dbTmContent__id__" class="dbTmContent">
<select id="selectOpt" class="dbTmCntLine">
<optgroup label="<?php echo(_t("_select_option_text")); ?>">
                    <bx_repeat:items>
                       
                             <td id="__id__-pas" class="notActive" __show_passive__>
                            <bx_if:icon_pas><img __class__ src="__src__" /></bx_if:icon_pas>
                            <bx_if:texticon_pas><i class="sys-icon __icon__"></i></bx_if:texticon_pas>
                            <option id="__id__" __class__ __href__ __target__ __on_click__><a id="__id__" __class__ __href__ __target__ __on_click__>__title__</a></option>
                    </td></bx_repeat:items>
                </optgroup>
    </select>
        </div>
    </div>
    <div class="clear_both">&nbsp;</div>
    <script type="text/javascript" language="javascript">
        $('#dbTopMenu__id__').addClass('dbTopMenuHidden').parents('.disignBoxFirst').ready(function() {
            dbTopMenuLoad('__id__');
        });
    </script>

</div>

Just to point this out to people. Things like __action__ and __title__ you find in templates are not variables and should not be referred to as such.

These are merely tags. Marker points if you will that represent the name of a key within the Associative array that contains the replacement values that is passed to the function that processes the template. And because they are not variables they are not global as people think they are and also do not contain the same thing from template to template.

thanx Deano92964 for pointing that out.
But i found out that this option doesn't work in Google chrome browser (pc) either.

IE, O, FF no problem! (not smartphone)

Maybe you have the solution for me/us :-)

I still believe lists have more space for development than selects. I have added a simple js function that toggles menu visibility on click. Demo available here:

http://nuknspax.com/d71/index.php?skin=uni

In the zip file attached is a ready version for UNI template. To apply it to a custom template you need to:

1. Apply steps 2 and 3 from the tutorial above.

2. Upload 'templates/tmpl_uni/designbox_menu_1.html' file from the pack to 'Dolphin root/templates/tmpl_yourTemplate/'. Replace the old file if required.

3. Add 3 css rules from 'templates/tmpl_uni/css/common.css' to the end of your common.css file or upload the one from the pack if there is no such file.

Thank you all for your feedback.

@solusoft It seems you are altering a designbox_menu_1.html from the zip pack I provided which is incorrect version and will not work. I have attached another html file in the post above.

@houstonlively I have tested the integration process a couple times and it is working.  Please provide your browser info and screenshots.

@professorSr Once the solution will be mobile friendly and tested it could be posted in tips and tricks forum. So, please test and leave your feedback.

 re

 You need to put a down arrow next to the list to let people know there's something more available.

Thanx nuknspax for the new zip file.
If people use the default timeline then they need to alter the designbox_menu_2.html too i think.

I have it all working with a select on my site now.
But I use your idea on the groups timeline. But i opend up the options.
As it also works better on smartphone

see attachment 1.

for select example see attachment 2.

I have it al working now!

Thanx to AndrewP for clearing the GWALL dbtopmenu issue.
and to nuknspax for getting me started in the right direction.
plus all the others for the extra input.

I really think this should be standard for the next update (7.1.5 or 6 version)