PHP 字符串按最大宽度选择不同导航的类 - php string to choose different navigation's classes by max width

php string to choose different navigation's classes by max width

本文关键字：导航选择字符串 PHP | 更新日期: 2023-09-27

>我有按最大宽度更改的主导航。

.main-navigation {
border-left: 1px solid #cccccc;
display: block;
float: right;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
max-width: 50%;
position: relative;
text-align: right;
text-transform: uppercase;
}
@media screen and (max-width: 885px) {
.main-navigation {
border: 0;
float: none;
max-width: 100%;  }

如您所见，第二个代码是当宽度低于 885px 时（如移动设备）。我已经尝试了很多方法，用css代码为每个人提供其他风格，但没有分离。所以，我想为较小的导航制作另一个主导航代码，并称他为主导航2。我需要一些 php 代码添加到原始代码中，这些代码按宽度添加到导航类中。这可能吗？这是原始代码：

        <nav id="site-navigation" class="main-navigation"      role="navigation">
        <h1 class="menu-toggle"><span class="screen-reader-text"><?php   _e( 'Menu', 'pictorico' ); ?></span></h1>
        <a class="skip-link screen-reader-text" href="#content"><?php  _e( 'Skip to content', 'pictorico' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

不幸的是，

您无法使用PHP获得屏幕宽度。您可以在javascript中通过获取屏幕宽度并通过按ID选择将其应用于导航标签来执行此操作

<script type='text/javascript'>
  var screenWidth = window.screen.width;
  var element = document.getElementById('site-navigation');
  if (screenWidth < 885) {
    element.className = navigation1;
  }
  else
  {
    element.className = navigation2;
  }
</script>