rootKID Posted November 10, 2016 Share Posted November 10, 2016 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 10, 2016 Share Posted November 10, 2016 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. Link to comment Share on other sites More sharing options...
rootKID Posted November 10, 2016 Author Share Posted November 10, 2016 i knew that, somehow... lol.. not sure why i posted this on PHP now haha 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted November 10, 2016 Share Posted November 10, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2016 Share Posted November 11, 2016 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. Link to comment Share on other sites More sharing options...
rootKID Posted November 12, 2016 Author Share Posted November 12, 2016 Hmm, ok thanks i will try to do this If it dosen't help, ill try to come back yet again ... Thanks again! Link to comment Share on other sites More sharing options...
dsonesuk Posted November 12, 2016 Share Posted November 12, 2016 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> Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now