The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
5 posters

    Code for "sexy drop down nav bar"

    avatar
    Khaoz
    Forumember


    Posts : 48
    Reputation : 4
    Language : English

    Solved Code for "sexy drop down nav bar"

    Post by Khaoz October 20th 2012, 8:05 pm

    I've gotten the code for login/logout/register to work with this navbar but unfortunatly I'm having troubles with the No new messages/new messages html code.
    there is this for the original one
    Code:
    <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

    but what I'm looking for is where its would change on the navbar when a new message is sent

    Note: Dropdown navbar
    Tutorial Link:
    Code:
    http://www.csshelp.net/t225-sexy-drop-down-menu-with-jquery-css-punbb-and-phpbb2


    If further information is needed just let me know
    avatar
    Khaoz
    Forumember


    Posts : 48
    Reputation : 4
    Language : English

    Solved Re: Code for "sexy drop down nav bar"

    Post by Khaoz October 20th 2012, 8:59 pm

    Code:
    <ul class="topnav">
                <li><a href="/h1-home">Home</a></li>
                                <li><a href="/forum">Forum</a></li>
                <li>
                    <a href="#">Client</a>

                    <ul class="subnav">
                        <li><a href="RemovedLink">Webclient</a></li>
                        <li><a href="RemovedLink">Desktop Client</a></li>
                       

                    </ul>
                </li>
                                <li><a href="/h3-RemovedName-shop">Shop</a></li>
                                <li><a href="#">Vote</a></li>
                <li><a href="/memberlist">Members</a></li>
                                <li><a href="/groups">Groups</a></li>
                                <li><a href="/profile?mode=editprofile">Profile</a></li>
                <li><a href="/privmsg?folder=inbox">Message</a></li>
                                <!-- BEGIN switch_user_logged_in -->
    <li class="topmenu"><a class="topmenu" href="{U_LOGIN_LOGOUT}"<img src="" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" align="right" />Logout</a></li>
    <!-- END switch_user_logged_in -->
    <!-- BEGIN switch_user_logged_out -->
    <li class="topmenu"><a class="topmenu" href="{U_REGISTER}"<img src="" alt="{L_REGISTER}" width="12" height="13" hspace="3" align="right" border="0" />{L_REGISTER}</a></li>
    <!-- END switch_user_logged_out -->
              </ul>
    This is the html nav bar
    I want to fix <li><a href="/privmsg?folder=inbox">Message</a></li>

    so that it shows when there is a new message in inbox and when there is not one

    I removed the links most of the navbar so its not advertisement as the forum is not ready yet :s
    nextlevelgaming
    nextlevelgaming
    Forumember


    Male Posts : 989
    Reputation : 38
    Language : English|CSS|HTML5|javascript|
    Location : New York

    Solved Re: Code for "sexy drop down nav bar"

    Post by nextlevelgaming October 21st 2012, 2:47 am

    You are allowed to provide a link as long as it is providing a visual to the support for you. If it is something simple like "Hey how do I change the main font color, heres my link" because everyone in support and more know how to change the main font color without looking at their site.

    Honestly though, it may be nice to be able to actually look at what we are working with.

    CSS wise though I believe the message ID is

    #i_icon_mini_message
    #i_icon_mini_new_message
    avatar
    Khaoz
    Forumember


    Posts : 48
    Reputation : 4
    Language : English

    Solved Re: Code for "sexy drop down nav bar"

    Post by Khaoz October 21st 2012, 3:41 am

    I removed the generated navbar with the tutorial to add the drop down nav bar. I managed to find a code that allowed for the login/logout/register feature on google where it would hide when they're logged in the "login and register button" and show the logout button and visversa what I'm asking now is for something to show on the new nav bar (not fourmotion generated) but html to show when there is a new pm/no pm I remember messing with these codes on forumotion like a year ago when the old system was doing the coding when people where removing the footer, etc. I know its out there but not sure how its done the old way regarding the old navigation style code :/ which is what I'm looking for.
    Aconitin
    Aconitin
    Forumember


    Male Posts : 246
    Reputation : 7
    Language : Indonesian
    Location : Indonesia

    Solved Re: Code for "sexy drop down nav bar"

    Post by Aconitin October 23rd 2012, 12:45 pm

    Bump..
    I also interesting for that.. Wink
    Aconitin
    Aconitin
    Forumember


    Male Posts : 246
    Reputation : 7
    Language : Indonesian
    Location : Indonesia

    Solved Re: Code for "sexy drop down nav bar"

    Post by Aconitin October 25th 2012, 2:31 pm

    What do you mean with..
    Rideem3 wrote:Also, make sure that you have the generated nav bar somewhere on your forum.
    ?
    Aconitin
    Aconitin
    Forumember


    Male Posts : 246
    Reputation : 7
    Language : Indonesian
    Location : Indonesia

    Solved Re: Code for "sexy drop down nav bar"

    Post by Aconitin October 26th 2012, 8:29 am

    So, how to hide it? Razz
    Aconitin
    Aconitin
    Forumember


    Male Posts : 246
    Reputation : 7
    Language : Indonesian
    Location : Indonesia

    Solved Re: Code for "sexy drop down nav bar"

    Post by Aconitin October 27th 2012, 10:25 pm

    And where we must put the dropdown menu codes if we may not replace {GENERATED_NAVBAR} ? Wink
    Aconitin
    Aconitin
    Forumember


    Male Posts : 246
    Reputation : 7
    Language : Indonesian
    Location : Indonesia

    Solved Re: Code for "sexy drop down nav bar"

    Post by Aconitin October 28th 2012, 2:09 pm

    Yes.. I know we don't replace Generated navbar but in this tutorial -> http://www.csshelp.net/t225-sexy-drop-down-menu-with-jquery-css-punbb-and-phpbb2
    we have to replace it.. Wink
    Look at my testing forum -> http://test.homediscussion.net/
    I don't get the dropdown menu..
    Help?
    Aconitin
    Aconitin
    Forumember


    Male Posts : 246
    Reputation : 7
    Language : Indonesian
    Location : Indonesia

    Solved Re: Code for "sexy drop down nav bar"

    Post by Aconitin October 30th 2012, 12:45 pm

    Bump.. Any help?
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -

    Solved Re: Code for "sexy drop down nav bar"

    Post by Nera. October 30th 2012, 12:59 pm

    The script you added doesn't load properly http://near-reality123123123.webs.com/bar.js
    Try taking it out of overall_header and adding it in JS managment marking all pages. When I try it from a console drop down loads next to CLIENT navigation as Web Client and Desctop client so it should work.
    Aconitin
    Aconitin
    Forumember


    Male Posts : 246
    Reputation : 7
    Language : Indonesian
    Location : Indonesia

    Solved Re: Code for "sexy drop down nav bar"

    Post by Aconitin October 30th 2012, 2:04 pm

    So, I add this script in JS Management
    Code:
    $(document).ready(function(){ 
     
        $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*) 
     
        $("ul.topnav li span").click(function() { //When trigger is clicked... 
     
            //Following events are applied to the subnav itself (moving subnav up and down) 
            $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click 
     
            $(this).parent().hover(function() { 
            }, function(){ 
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up 
            }); 
     
            //Following events are applied to the trigger (Hover events for the trigger) 
            }).hover(function() { 
                $(this).addClass("subhover"); //On hover over, add class "subhover" 
            }, function(){  //On Hover Out 
                $(this).removeClass("subhover"); //On hover out, remove class "subhover" 
        }); 
     
    });
    And I get the Dropdown menu..
    Thanks a lot, Nera.. Very Happy
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -

    Solved Re: Code for "sexy drop down nav bar"

    Post by Nera. October 30th 2012, 5:01 pm

    Welcome. Wink
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: Code for "sexy drop down nav bar"

    Post by SLGray October 30th 2012, 6:02 pm

    Topic Solved & Locked



    Code for "sexy drop down nav bar" Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.

      Current date/time is November 11th 2024, 7:11 pm