Jump to content
rootKID

Dynamic website menu... too many items outside div, what to do?

Recommended Posts

Hello fellow W3S Users. I have need of your hints and guides yet again.

 

I have no code as such yet, but i was wondering if anyone could tell me how to make a PHP Query code that will count the menu items in my database and if the menu items are over lets say "8" or "9", then at the end of the menu there will be a "+" sign, which will become a drop-down menu for all the rest of my menu items?

 

I have about 15 menu items so to make it look a little more pretty i thought that would be a great idea?

 

Now i have a specific width "800px" for the menu, however my idea is that i either give the menu items "using ul/li for menu items" a specific width, orr give them an automatic width and then somehow say that if the menu items goes "outside the div-box", THEN make the plus sign with the drop-down menus?

 

Is this possible? The last idea i mean? Because some of the menu items i have will have some long names (well sorts of, but still... considering for the feature...)

 

Hoping you guys understands what i mean and will/can help me?

Yet again thanks a lot and hoping you have some solution to my problem :)

 

Thanks in advance, and best regards, rootKID.

Share this post


Link to post
Share on other sites

PHP isn't right for that, you would use Javascript for that. With Javascript you can figure out how big an HTML element is and do something based on that, there's no reason to try to force PHP to do that.

Share this post


Link to post
Share on other sites

i knew that, somehow... lol.. not sure why i posted this on PHP now haha xD

 

Anyhow, question is how? Do i measure the width or?... And then what? Like after 800px width add a drop-down "+ sign" to the end and add the rest of menu in there?... just throwing in ideas, feel free to jump in.. lol x))..

 

thanks in advance :D

Share this post


Link to post
Share on other sites

One option is to render the element off-screen and then get the dimensions of it, and figure out whether you add it to the existing list or show the plus sign. It sounds like CSS can do a lot of that automatically but I'm not sure it can handle all of it.

Share this post


Link to post
Share on other sites

Use index of current list items within ul, from index 7 or 8 (index start from 0), add list item with '+' sign and class name, any sibling list items follow it, hide.

Share this post


Link to post
Share on other sites

Hmm, ok thanks i will try to do this :D

If it dosen't help, ill try to come back yet again :P...

 

Thanks again! :P:DxD

Share this post


Link to post
Share on other sites

This is rough example of what i mean

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

            var list_item_limit = 7;
            $(function() {
                $('nav ul:gt(0)').addClass('parent_with_children');
                $('.parent_with_children').prev('a').addClass('children_pointer');
                $('.parent_with_children').each(function() {
                    if ($(this).children('li').length > list_item_limit)
                    {
                        $('<li class="LI_limit plus"><a href="#"> + </a></li>').insertAfter($(this).children('li').eq(list_item_limit));
                    }
                });

                $('.LI_limit').click(function() {

                    $(this).toggleClass('minus plus');

                    if ($(this).hasClass('plus')) {
                        $(this).find('a').html(' + ');
                    }
                    else
                    {
                        $(this).find('a').html(' -');
                    }

                });


            });

        </script>
        <style type="text/css">
            nav ul, nav li  {padding:0; margin: 0; list-style-type: none;}
            nav ul li {position: relative; display: inline-block; padding-right: 1em;}
            nav ul ul li {display: block; padding:0;}
            nav ul li a {padding: 0 10px; white-space: nowrap; }
            nav ul {background-color: red;}
            nav ul ul {position: absolute; top: 20px; left:0;background-color: orange;display: none; min-width: 100px;}
            nav ul ul ul {left: 100%;background-color: yellow; top: 0;}
            .LI_limit a {text-decoration: none;}
            .LI_limit.plus ~ li{display: none; }
            .LI_limit.minus ~ li{display: block;}

            nav ul li:hover > ul {display: block;}

            .children_pointer:after {content: " > "; display: inline-block; position: absolute; right: 10px;}
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Parent 1</a> <ul>
                        <li><a href="#">sub 1-1</a></li>
                        <li><a href="#">sub 1-2</a></li>
                        <li><a href="#">sub 1-3</a></li>
                        <li><a href="#">sub 1-4</a>
                            <ul>
                                <li><a href="#">sub 2-1</a></li>
                                <li><a href="#">sub 2-2</a></li>
                                <li><a href="#">sub 2-3</a></li>
                                <li><a href="#">sub 2-4</a></li>
                                <li><a href="#">sub 2-5</a></li>
                                <li><a href="#">sub 2-6</a></li>
                                <li><a href="#">sub 2 -7</a></li>
                                <li><a href="#">sub 2-8</a></li>
                                <li><a href="#">sub 2-9</a></li>
                                <li><a href="#">sub 2-10</a></li>

                            </ul>



                        </li>
                        <li><a href="#">sub 1-5</a></li>
                        <li><a href="#">sub 1-6</a></li>
                        <li><a href="#">sub 1-7</a></li>
                        <li><a href="#">sub 1-8</a></li>
                        <li><a href="#">sub 1-9</a></li>
                        <li><a href="#">sub 1-10</a></li><!--   -->
                    </ul></li>
                <li><a href="#">Parent 2</a> </li>
                <li><a href="#">Parent 3</a>  <ul>
                        <li><a href="#">sub 1-1</a></li>
                        <li><a href="#">sub 1-2</a></li>
                        <li><a href="#">sub 1-3</a></li>
                        <li><a href="#">sub 1-4</a></li>
                        <li><a href="#">sub 1-5</a></li>
                        <li><a href="#">sub 1-6</a></li>
                        <li><a href="#">sub 1-7</a></li>
                        <li><a href="#">sub 1-8</a></li>
                        <li><a href="#">sub 1-9</a></li>
                        <li><a href="#">sub 1-10</a></li>
                        <li><a href="#">sub 1-11</a></li>
                        <li><a href="#">sub 1-12</a></li>
                        <li><a href="#">sub 1-13</a></li>
                        <li><a href="#">sub 1-14</a></li>
                    </ul></li>
                <li><a href="#">Parent 4</a> </li>

            </ul>
        </nav>
    </body>
</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×