无序列表-列表项位置 [英] Unordered list - list item position

问题描述

目前，我有一个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>

解决方案

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

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

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

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

支持:IE10 +，Firefox，Chrome

At the moment I have a website with 5 pages and the main navigation is being displayed using an unordered list. What I'm trying to achieve is for the "active" page to be displayed first in the list.

For example, if I have a these pages: "Home | About | Contact | Blog". When you're on the contact page, this should move to the top of the list, so the menu would than look like this: "Contact | Home | About | Blog".

What's causing me problems is that the menu is being included through php, so there is just one menu for all the pages and through PHP I have made it so that it adds an "active" class to the current page menu item.

I am not really sure what the best solution for this would and would really appreciate any help.

Edit:

This is the navigation page that's being included into each page:

            <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>

解决方案

Here is a pure CSS way to do it using Flexbox ordering.

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

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

Demo: http://codepen.io/antibland/pen/ZWjdqL

Support: IE10+, Firefox, Chrome

这篇关于无序列表-列表项位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！