Finding The Width Of A Device And Find What Width A <Ul> Element Would Be.

[jbonnett]

Hi I'm trying to find some code that would tell the bit of code that I created what the device width is so I can make this navigation menu dynamic.

 

Meaning: if the device width is 480px and the navigation menu would come to 1024px then using PHP the code would automatically put the <li> items in to a more tab untill the the width is equal or less than 480px.

 

I don't want to use Javascript to do this as I know most of you will recommend using.....

 

Here's my code. Change the variable $deviceWidth to and refresh.... change between 1 and 10.

<?
$navItems = array("ME", "MUSIC", "VIDEO", "GIGS", "FESTIVALS", "CONTACT");
$deviceWidth = 3;
$diffrence = count($navItems) - $deviceWidth;
while($diffrence > 0){
$more[] = array_pop($navItems);
$diffrence = $diffrence - 1;
}
foreach($navItems as $nav){
$lower = strtolower($nav);
$upper = strtoupper($nav);
$lower1 = strtolower($more);
$upper1 = strtoupper($more);
echo"<li class='Nav'><a href='$lower.php'>$upper</a></li>";
}
if(!empty($more)){
echo"<li class='Nav-more'><a href='#'>MORE</a>
 <ul class='more'>";
foreach($more as $more){
$lower1 = strtolower($more);
$upper1 = strtoupper($more);
 echo "<li class='Nav-more'><a href='$lower1.php'>$upper1</a></li>";
}
echo"</ul>
</li>";
}
?>

 

And the CSS to give an example.

.Navigation {
background-image:url(images/H_BG.png);
background-repeat:repeat-x;
width:100px;
height:50px;
}
.Nav-bar {
background-image:url(images/H_BG.png);
background-repeat:repeat-x;
width:90%;
min-width:700px;
_width:700px;
font-size:20px;
line-height:40px;
margin-left:5%;
margin-right:5%;
height:50px;
}
ul.Nav {
list-style:none;
margin:0px;
padding:0px;
}
ul.Nav li {
font-weight:20;
display:inline;
}
ul.Nav li a {
font-weight:bold;
text-decoration: none;
float: left;
color:#7D7D7D;
border-left:1px solid #D1D1D1;
padding:5px;
padding-left:10px;
padding-right:10px;
}

ul.Nav li a:hover {
background-image:url(images/H_BG2.png);
background-repeat:repeat-x;
font-weight:bold;
text-decoration: none;
float: left;
}
ul.more {
display:none;
}
ul.Nav li.Nav-more:hover ul.more {
display:block;
font-weight:bold;
text-decoration: none;
float: left;
color:#111;
border-left:1px solid #0f0;
padding:5px;
padding-left:10px;
padding-right:10px;
}

[ManiacDan]

Javascript is the only way, usually. Why not just make all your widths a percentage instead of a number of pixels?

[jbonnett]

Javascript is the only way, usually. Why not just make all your widths a percentage instead of a number of pixels?

 

How would you edit this script to do what I need with % instead of px.

[KevinM1]

What you want to do is best served with just straight CSS. You can detect the size of the screen within CSS using media queries, which sort of function like an if/else. More info: http://mobile.smashi...f-your-website/

[jbonnett]

Thank you