html 自定义侧边栏导航（https://tpchealth.squarespace.com/）

Posted 2021-05-11

<!-----------------------------------------------------------------------

				How to add new sections and pages to the menu

------------------------------------------------------------------------->
<!-----------------------------------------------------------------------

						To create a new section:

	Go down to line 52
	Here are some lists that are every section in the navigation

	To create a new section you will need to create a new list, you can do this by writing this on a new line:
						var <sectionname> = ["<title>", "page1", "page2"];

	Where <sectionname> is the name of the new section. If the section is under another section, the name needs to be in ALL lower case with NO spaces. Make sure it is spelt exactly the same. 

	<title> is the text that appears at the top of the menu when you are in that section and is not part of the navigation. 

	You can have as many pages as you like after the title, I have only created 2 as an example.

	When you make a new section you need to add it to the end downArrows list on line 86 (this may change by a couple as you add more sections)

------------------------------------------------------------------------->

<!-----------------------------------------------------------------------

							To create a new page:

	Get the url slug for the page you want to link. You can do this by navigating to the pages section in the sidebar then clicking the little cog icon next to the page you wish you link. In this menu there will be a text field containing the url slug. 

	Once you have the url slug you want, scroll down to line 52. Here, there are lists for each section that you can add a new page to. To add a new page, you will need to add another item to the list that contains the url slug. Here is an example of adding another item where the url slug is "new-page" and the section is "main":

	Current line: var main = ["home", "services", "about", "why-us", "case-studies", "resources", "contact-us"]; 

	New line: var main = ["home", "services", "about", "why-us", "case-studies", "resources", "contact-us", "new-page"]; 

	The order of these items in this list is also the order that they will show in the menu.

------------------------------------------------------------------------->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("body").prepend('<div id="navButton"><img src="https://static1.squarespace.com/static/58513408b3db2bd1b0268785/t/58f609562e69cf5a945fc282/1492519254618/menu-button+%282%29.png"></img></div>');
    $("body").prepend('<div id="topBar"></div>'); 
    $("body").prepend('<div id="logoCont"><a href="/home"><img src="https://static1.squarespace.com/static/58513408b3db2bd1b0268785/t/585166cab3db2bd1b0289c00/1481729743151/TPC_logo_1.png"></img></a></div>');
    $("body").prepend('<div class="box"><div class="box-inner"></div></div>');
    $("body").prepend('<div class="overlay"></div>'); 
   
    //Below are all the sections that you can add new pages to
    
    var main = ["home", "services", "about", "why-us", "case-studies", "resources", "contact-us", "test"]; 
  
    var services = ["services", "services-for-organisations", "for-individuals"];
    
    var casestudies = ["case-studies", "case-study-1", "case-study-2", "case-study-3", "case-study-4"];
    
    var servicesfororganisations = ["services-for-organisations", "health-coaching", "coaching-skills-development", "leadership-development", "team-development", "partnership-and-community-development", "practitioner-development", "consulting"];
    
    var forindividuals = ["for-individuals", "open-programmes", "clinical-coaching-service"];  
    
    var clinicalcoachingservice = ["clinical-coaching-service", "resilience", "recovery", "lifestyle-change", "worklife-balance", "long-term-condition-management" ];
    
    var healthcoaching = ["health-coaching",  "applications"];
    
    var coachingskillsdevelopment = ["coaching-skills-development",  "coaching-for-social-care", "coaching-for-clinicians", "coaching-for-clinical-supervisors"];
    
    var leadershipdevelopment = ["leadership-development",  "leadership-in-healthcare", "clinical-leadership-development", "leadership-skills-development"];
    
    var teamdevelopment = ["team-development",  "clinical-team-leadership", "clinical-team-development", "clinical-team-coaching"];
    
    var partnershipandcommunitydevelopment = ["partnership-and-community-development",  "coproductive-leadership", "improving-patient-experience", "volunteer-development"];
    
    var practitionerdevelopment = ["practitioner-development",  "practitioner-wellbeing", "practitioner-resilience", "meaning-and-purpose-in-healthcare"];
    
    var consulting = ["consulting",  "leadership-consulting", "supporting-service-design", "supporting-quality-improvement", "consulting"];
    
    //This is an example that is visible in the side bar. You can delete this line as it is just an example. 
    var example = ["Title", "Page 1", "Page 2"];
  
    //end of sections
    
    //add any section that has sub-sections to the end of this list
    var downArrows = ["case-studies", "services", "for-individuals", "services-for-organisations", "clinical-coaching-service", "services-for-organisations", "health-coaching", "coaching-skills-development", "leadership-development", "team-development", "partnership-and-community-development", "practitioner-development", "consulting", "test"];
    
    var path = ['main'];
    
    $('#navButton img, .overlay').click(function(){
      fillMenu(main);   
      listener();
      toggle();
    });
    
    function listener(){
      $('#navMenu a').click(function(){
        
        //makes titles links to pages
        if($(this).attr('data-title')){
         	return true; 
        }
        
       	 var current = $(this).attr('data-name'),
          	 listItem = current.replace(/-/g, "");

         if (downArrows.indexOf(current) >= 0){
           	path.push(listItem);
          	fillMenu(eval(listItem));
            listener();
            return false;
         }
		 listener();
      });
      $("#backButton").click(function(){
        if (path.length > 1){
          path.pop();
          fillMenu(eval(path[path.length - 1]));
        }else if(path.length == 1){
          fillMenu(main)
        }
        listener();
        return false;
      });
    }

  var menuWidth;
  var contentToggle = 0; 
  function toggle(){
    path = ['main'];
    if($( window ).width() < 415){
      menuWidth = '100%';
    }else{
      menuWidth = '415px';
    }
    if (contentToggle == 0) {  
      $('.overlay').animate({
        width: '100vw'
      },1);
      $('.overlay').fadeIn();
      $('.box').animate({
        width: menuWidth
      },500); 
      contentToggle = 1; 
    }
    else if (contentToggle == 1) {
      $('.box').animate({
        width:'0'
      });      
      $('.overlay').fadeOut();
      $('.overlay').animate({
        width:'0'
      });      
      contentToggle = 0; 
    }  
  }

  function fillMenu(items){
    $('#menuBar').remove();
    $('#navMenu').remove();
    $('.box-inner').prepend('<ul id="navMenu"></ul>');
    
    for (i = 0; i < items.length; i++) { 
      var mystring = items[i].replace(/-/g, " ");
      $('#navMenu').append('<a id="'+items[i]+'a" data-name="'+items[i]+'"href="/'+items[i]+'"><li id="'+items[i]+'">'+mystring+'</li></a>'); 
    }
    
    $('#navMenu li').eq(0).css('font-size','120%');
    $('#navMenu a').eq(0).attr('data-title','true');
    $('#navMenu').before('<div id="menuBar"><div>');
    $('#menuBar').prepend('<a id="closeNewsletter"></a>');
    
    if(path.length > 1){
      $('#menuBar').append('<div id="backButton"><img src="https://static1.squarespace.com/static/58513408b3db2bd1b0268785/t/58fb2a4e1b631b1affe4f4f6/1492855374840/1492873253_ic_arrow_drop_down_48px.png">BACK</div>');
    }
    
    $('#closeNewsletter').click(toggle);     
    addArrow(downArrows);
  }
  
  function addArrow(items){
    for (i = 0; i < items.length; i++) { 
      $('#' + items[i]).addClass('downArrow');
    }
    $('#navMenu li').eq(0).removeClass('downArrow');
  }  
      });
</script>
<style>
  @font-face {font-family: 'Geometric';src: url('https://static1.squarespace.com/static/58513408b3db2bd1b0268785/t/58fb1af8893fc0d7603a9439/1492851449110/336B61_0_0.ttf') format('truetype');}
  #backButton img{
    float: left;
    width: 40px;
    height: 40px;
    margin-right: -7px;
  }
  #topBar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: white;
    z-index: 3;
  }
  #backButton{
    background: #ff9100;
    height: 40px;
    width: 100px;
    font-size: 18px;
    line-height: 40px;
    color: white;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -20px;
    cursor: pointer;
    font-family: Geometric;   
  }
  #navButton{
    position: fixed;
    width: 30px;
    top: 26px;
    left: 35px;
    cursor: pointer;
    z-index: 4;
  }
  #logoCont{
    position: fixed;
    width: 200px;
    top: 12px;
    right: 0px;
    cursor: pointer;
    z-index: 4;
  }
  #logoCont img{
    width: 75%;
  }
  #navButton img{
    width: 100%;
  }
  #menuBar{
    position: relative;
    width: 100%;
    height: 12vh;
    background: #292A4D;
  }
  .overlay{
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    z-index: 5;
    display: none;
  }
  #closeNewsletter:before{
    font-family: 'squarespace-ui-font';
    color: #ff9100 !important;
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    content: "\e02e";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    font-size: 40pt;
    line-height: 12vh;
    cursor: pointer;
    float: left;
  }
  #navMenu{
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    width: 90%;
    text-align: left;
    font-size: 18pt;
    overflow-y: auto;
    overflow-x: auto;
    max-height: 88vh;
  }
  .downArrow{
    background: url("https://static1.squarespace.com/static/58513408b3db2bd1b0268785/t/58fb221cb3db2b703c324f87/1492853276616/1492871257_arrow-down-01.png") no-repeat 96% 50%;
  }
  #navMenu li{
    border-bottom: solid #d1d1d1 1px;
    padding: 15px 0;
    text-transform: uppercase;
    width: calc(100% - 40px);
    padding-right: 40px;
  }
  #navMenu a{
    font-family: Geometric;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
    color: #898989 !important;
    cursor: pointer;
    -webkit-transition: background-color ease-in-out .3s,
                        border-color ease-in-out .3s,
                        color ease-in-out .3s;
    transition:     background-color ease-in-out .3s,
                        border-color ease-in-out .3s,
                        color ease-in-out .3s;
  }
  #navMenu a img{
    float: right;
  }
  #navMenu a:hover{
    color: #ff9100 !important;
  }
  .box{
    float:left;
    overflow: hidden;
    background: white;
    height: 100vh;
    width: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 6;
  }
  .box-inner{
    width: 100%;
    overflow: hidden;
  }
  .box-inner::-webkit-scrollbar { 
    display: none; 
	}
  #page-thumb{
    z-index: 2;
  }
  #page-title{
    z-index: 3;
  }
</style>