堆栈内存溢出
  简体   繁体   English

固定垂直导航菜单，动态更改菜单按钮

[英]Fixed vertical navigation menu with dynamically changing menu buttons

 原文  2015-05-07 06:03:17  7   2    javascript/ jquery/ html/ css/ ajax

问题描述

I have created a theme for my website with a Fixed vertical navigation menu on the right hand side of the webpage to aid the users to scroll to different sections of the website. 我已经为我的网站创建了一个主题，在网页的右侧有一个固定的垂直导航菜单，以帮助用户滚动到网站的不同部分。 Now, these navigation menu buttons help the user in moving to the different sections of the page, but the color of the dots of the menu do not change when we click the dot of a section (or) if we traverse to a section by scrolling up/down. 现在，这些导航菜单按钮可以帮助用户移动到页面的不同部分，但是当我们点击一​​个部分（或）的点时，如果我们通过滚动遍历一个部分，菜单点的颜色不会改变向上/向下。 How do you make the color of the dots to change "Dynamically" in the below code? 如何使点的颜色在下面的代码中“动态地”改变？ :- ： - 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
background-color:#3E3947;
} 
#cd-vertical-nav {
 position: fixed;
 right: 40px;
 top: 50%;
 bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
 transform: translateY(-50%);
 z-index: 1;
}
#cd-vertical-nav li {
text-align: right;
list-style:none;
}
#cd-vertical-nav a {
display: inline-block;
/* prevent weird movements on hover when you use a CSS3 transformation -   webkit browsers */
-webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}
#cd-vertical-nav a:after {
 content: "";
 display: table;
 clear: both;
 }
 #cd-vertical-nav a span {
 display: inline-block;
 float: right;
 -webkit-transform: scale(0.6);
 -moz-transform: scale(0.6);
 -ms-transform: scale(0.6);
 -o-transform: scale(0.6);
  transform: scale(0.6);
  }
  #cd-vertical-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
   transform: scale(1);
  }
  #cd-vertical-nav a:hover .cd-label {
  opacity: 1;
  }
  #cd-vertical-nav a.is-selected .cd-dot {
  background-color: white;
  }
  #cd-vertical-nav .cd-dot {
  position: relative;
  top: 8px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #d88683;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
   }
  #cd-vertical-nav .cd-label {
   position: relative;
   margin-right: 10px;
   padding: .4em .5em;
   color: white;
   font-size: 14px;
   font-size: 0.875rem;
   -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
   -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0;
   -webkit-transform-origin: 100% 50%;
   -moz-transform-origin: 100% 50%;
   -ms-transform-origin: 100% 50%;
   -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    }


/*********************************RIGHT SIDE    *************************************/

    </style>
</head>
<body>
    <nav id="cd-vertical-nav">
    <ul>
        <li>
            <a data-number="1" href="#section1" class="is-selected">
                <span class="cd-dot"></span>
                <span class="cd-label">Intro</span>
            </a>
        </li>
        <li>
            <a data-number="2" href="#section2" class="">
                <span class="cd-dot"></span>
                <span class="cd-label">About</span>
            </a>
        </li>
        <li>
            <a data-number="3" href="#section3" class="">
                <span class="cd-dot"></span>
                <span class="cd-label">Features</span>
            </a>
        </li>
        <li>
            <a data-number="4" href="#section4" class="">
                <span class="cd-dot"></span>
                <span class="cd-label">Portfolio</span>
            </a>
        </li>
        <li>
            <a data-number="5" href="#section5">
                <span class="cd-dot"></span>
                <span class="cd-label">Pricing</span>
            </a>
        </li>
        <li>
            <a data-number="6" href="#section6">
                <span class="cd-dot"></span>
                <span class="cd-label">Contact</span>
            </a>
        </li>
    </ul>
</nav>

    <section id="section1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

    </section>

    <section id="section2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>        

    </section>

    <section id="section3">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>   
    </section>

</body>

What JavaScript/Ajax/jQuery/HTML/CSS code do I need to write to make it work? 我需要编写哪些JavaScript / Ajax / jQuery / HTML / CSS代码才能使其工作？

That is how do we "Dynamically" change the { class="is-selected" } on the code :- 那就是我们如何“动态地”改变代码上的{class =“is-selected”}： - 

<li> <a data-number="2" href="#section2" class=""> <span class="cd-dot">      </span> <span class="cd-label">About</span> </a> </li>

etc etc on the other code sections/ nav sections ??? 等等其他代码部分/导航部分??? I guess that would solve the problem 我想这可以解决问题

2 个解决方案

解决方案1
 4 已采纳  2015-05-07 06:37:47

You can do this for the active class (much like @Sachink suggested): 您可以为活动类执行此操作（非常类似于@Sachink建议）： 

var $navLinks = $('#cd-vertical-nav a');

$navLinks.on('click', function(){
  $navLinks.removeClass('is-selected');
  $(this).addClass('is-selected');
});

For the scrolling, you need to watch the scroll position in each of your <section> s and when the scrollTop matches a section, set the corresponding menu item's class to is-selected like this: 对于滚动，您需要在每个<section>观看滚动位置，当scrollTop与某个部分匹配时，将相应的菜单项的类设置为is-selected如下所示： 

var windowHeight = $(window).height();
$('section').each(function(){
  var $this = $(this);
  $(document).scroll(function(){
    var scrollTop = $(window).scrollTop();
    var offset = $this.offset().top;
    var height = $this.outerHeight();

    if (offset + height <= scrollTop || offset >= scrollTop + (windowHeight - (height / 2))) {
      return;
    }

    var selector = '[href="#' + $this.prop('id') + '"]';
    var $menuItem = $navLinks.filter(selector);

    $navLinks.removeClass('is-selected');
    $menuItem.addClass('is-selected');
  });
});

You can see a working example here: http://jsfiddle.net/5w2bkd6k/2/ 你可以在这里看到一个有效的例子： http ： //jsfiddle.net/5w2bkd6k/2/

解决方案2
 3  2015-05-07 06:26:10

You need to add following jQuery code: 您需要添加以下jQuery代码： 

<script>
    $(document).ready(function(){
        $('nav li a').click(function(){
            $('nav li a').removeClass('is-selected');
            $(this).addClass('is-selected');
        })
    });
</script>

See fiddle : http://jsfiddle.net/sachinkk/5w2bkd6k/1/ 见小提琴： http ： //jsfiddle.net/sachinkk/5w2bkd6k/1/

OR 要么

I suggest you to use following code for smooth scrolling 我建议你使用以下代码进行平滑滚动 

    $(document).ready(function(){
        $('nav li a').click(function(){
            $('nav li a').removeClass('is-selected');
            $(this).addClass('is-selected');
            event.preventDefault();
            var toGo = $(this).attr('href');
            $('html, body').animate({
                scrollTop: $(toGo).offset().top
            }, 1000);
        })
    });

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将垂直菜单更改为水平菜单 - Changing Vertical Menu to Horizontal Menu 调整固定导航菜单的大小 - Resize fixed navigation menu 布尔马更改导航菜单 - Bulma Changing Navigation Menu 如何创建垂直导航菜单？ - How to create a Vertical Navigation Menu? jquery - 垂直手风琴导航菜单 - jquery - vertical accordion navigation menu 如何设置导航菜单以填充没有固定高度的导航栏后剩余的垂直空间？ - How to set navigation menu to fill remaining vertical space after navigation bar with no fixed height? 将Jquery垂直选项卡更改为菜单 - Changing Jquery vertical tabs to menu 滚动后固定导航菜单 - Fixed Navigation Menu after Scrolll 固定的动态侧边栏导航菜单？ - Fixed, dynamic sidebar navigation menu? 记住菜单状态垂直多级导航 - remember menu state vertical multilevel navigation
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM