Creating a Drop Down Menu in Forum Navigation

[? Placebo]

Forum URL: Visions of Pandemonium



Alright, so I've always loved the way Adoxography's skin works, specifically the dropdown menu in the side menu navigation that splits up user-related navigation with forum navigation. So, I was wondering if I could possibly do the same for my own forum Visions of Pandemonium (link above). I already have the side menu navigation, so all that's left is adding the drop down menu in the same general format as Adoxography has.



Ideally, I'd like it organized like so:

Drop Down menu (labeled as the username):

- Profile

- Notifications

- Reports (inbox)

- Settings

- Log Out



Not in Drop Down menu:

- Home

- Patients (members)

- Search

I'm not entirely certain that this question would go here, maybe it would go in one of the request boards? If so, please let me know which one and I'll move it accordingly. Thank you!

(moved from its former location in the Support board)

[Tumbleweed]

Not saying I'll do this but I did get a dropdown set up on my test site somewhat similar to the one you linked to, but we just need a bit more info. For a guest, what should they see? Will the register or login just be there without a click function to show? (Personally, I think this would be best as hiding register and login might mean your guests never find how to do so.)  I also noticed you have "reports" in there and that would be for staff that have those powers. So for regular members, I take it you would not want reports to show? The difficulty for me to do this is I'm not sure how to do the links that would take a specific user to their profile settings as the link always has user 1 or user 2.

Like for my profile settings, it is : eltestsite1.proboards.com/user/1/settings
I'm not sure exactly how I could get that link to take you to the current members settings but I'll be thinking on this and keep my fingers crossed someone else who knows off the bat how to do this comes around.

[T.C.]

<a href="/user/$[current_user.id]/settings">Settings</a>  

[Tumbleweed]

Nov 5, 2016 13:22:47 GMT -8 T.C. said:

<a href="/user/$[current_user.id]/settings">Settings</a>  

Muchas gracias! That totally makes sense.

[? Placebo]

Tumbleweed, hello! The "Reports" page is simply another word for the Inbox or Messages, like how we use "Patients" for the member page, if that makes sense.

As for the guest user options, I would prefer they display like so:

Inside Drop down menu (preferably the menu would already be dropped down, as it is in Adoxography!):
- Login
- Register

Not Inside Drop down menu:
- Home
- Search

Thank you for this!

[Tumbleweed]

Nov 6, 2016 8:15:33 GMT -8 ? Placebo said:

Tumbleweed , hello! The "Reports" page is simply another word for the Inbox or Messages, like how we use "Patients" for the member page, if that makes sense.

As for the guest user options, I would prefer they display like so:

Inside Drop down menu (preferably the menu would already be dropped down, as it is in Adoxography!):
- Login
- Register

Not Inside Drop down menu:
- Home
- Search

Thank you for this!

Aww, I totally missed that in your first post about reports being the inbox for messages. I'll see if I can work a bit on this for you tonight but I'm pretty worn out as all day I've been working on reshingling my garage roof and only got a few hours sleep to boot and tomorrow will be the same so I want a decent nights sleep so heading to bed soon. 
Meanwhile, anyone can feel free to jump in and take this request. 

Never mind, I think I have it close enough that I can give you what I have and we can work out any tweaks you may want: (My Test Site if you want to take a peek but keep in mind I do not have the guest clickable because I just think a visitor isn't going to want to hide them and if I were you, I'd want the visitor aware at all times they are lurking and not signed in or registered. Hope that is o.k. But for members, it is clickable to show the things you wanted.

Now I have my side table in my wrapper at the very bottom of everything but since you already have your side bar this is what you'll need to add where ever you want it to go in your side bar.

<div class="side_nav">
<center>
<div class="cbutton" onclick="$('#target').toggle();">  
    $[current_user.avatar]
    $[current_user.name]
</div>

{if !$[current_user.is_member]}
{if $[login_link] || $[register_link]}<i class="fa fa-sign-in"></i>$[login_link]
{if $[login_link] && $[register_link]}<br> {/if}<i class="fa fa-linux fa-2" aria-hidden="true"></i>$[register_link].{/if}
{else}
<div id="target" style="display:none;">
<a href="/user/$[current_user.id]">Profile</a><br>
<a href="/user/$[current_user.id]/notifications">Notifivations</a><br>
<a href="/user/$[current_user.id]/conversations/inbox">Reports</a><br>
<a href="/user/$[current_user.id]/settings">Settings</a><br>
<i class="fa fa-sign-out" aria-hidden="true"></i> $[logout_link]
</div>  
{/if}  
<ul>          
<li><a class="state-active" href="/" accesskey="1"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><a href="/members" accesskey="5"><i class="glyphicon glyphicon-user"></i>Patients</a></li>            
<li><a href="/search" accesskey="4"><i class="glyphicon glyphicon-search"></i>Search</a></li>
</ul>
</center>  
</div>
   </div>



The only things I have is the link for font-awesomes and glyphicons.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

If you already have the links in your wrapper template then you don't need to add them again or if you are not going to use them, then you won't need them at all.
But if you do want to use them, I added a few so you can see how to add your own or you can of course remove them. They are the ones between i tags, example of one: <i class="glyphicon glyphicon-user"></i>

and this is the only css I used style things was to put a bit of space after the icons and change the color of the font-awesme/glyphicon icons:

/*style font awesomes*/
.fa-sign-in,.fa-linux,.glyphicon-user,.glyphicon-search{margin-right:3px;color:white;
}
/*this one already has margin on the right*/
.glyphicon-home{color:white;
}


Let me know how it goes..... fingers crossed.
Edit, I just realized maybe you wanted an expand/collapse arrow type thing like Adoxography so I've added an expand but that is as far as I've gotten and am heading to bed now so it will have to wait until after I wake up and then it will be late in the evening. I'm testing this expand and will add this collapse.

[? Placebo]

Thank you very much for this! Though at this point in time I do not have the time to test it out, I'll do so when I get home. Hopefully it works out, and if not I'll definitely let you know.

Again, thank you!

EDIT: It does seem to be working, so the functionality is there, and I'm sure that with a bit of tweaking in the CSS I'll manage to get the layout together. I appreciate the help!

[Tumbleweed]

You're welcome. I left it pretty bare bones with no style since it seems you know what you are doing css-wise, but do let me know if you run into a hiccup you can't figure out.