php - 无序列表-列表项位置

Question

目前我有一个有 5 个页面的网站，主导航是使用无序列表显示的。我想要实现的目标是让“事件”页面首先显示在列表中。

例如，如果我有以下页面:“主页 | 关于 | 联系方式 | 博客”。当您位于联系页面时，它应该移至列表顶部，因此菜单将如下所示:“联系|主页|关于|博客”。

给我带来问题的是菜单是通过 php 包含的，因此所有页面只有一个菜单，并且通过 PHP 我已经制作了它，以便它向当前页面菜单项添加一个“事件”类。

我不太确定最好的解决方案是什么，并且非常感谢任何帮助。

编辑:

这是包含在每个页面中的导航页面:

            <nav class="large-nav">
              <ul>
                <li <?php echo ($activePage == 'ourStory') ? "class='active'" : ""; ?> ><a href="our_story.php" title="">OUR STORY</a></li>
                <li <?php echo ($activePage == 'services') ? "class='active'" : ""; ?> ><a href="services.php" title="">SERVICES</a></li>
                <li <?php echo ($activePage == 'projects') ? "class='active'" : ""; ?> ><a href="projects.php" title="">PROJECTS</a></li>
                <li <?php echo ($activePage == 'contact') ? "class='active'" : ""; ?> ><a href="contact.php" title="">CONTACT</a></li>
                <li <?php echo ($activePage == 'upload') ? "class='active'" : ""; ?> ><a style="margin-right: 0;" href="upload.php#top" title="">UPLOAD</a></li>
              </ul>
            </nav>

Answer 1

这是使用 Flexbox 排序的纯 CSS 方法。

ul {
  …
  display: flex;
  flex-direction: column;
}

li[class=active] {
  order: -1;
  …
}

演示:http://codepen.io/antibland/pen/ZWjdqL

支持:IE10+、Firefox、Chrome