Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Section


Column


HTML
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Current ETCLC Participants</a>
  <a href="#news">Participating Organizations</a>
  <a href="#contact">Resources</a>
  <a href="#contact1">Patient and Donor Info</a>  
  <a href="#about">About ETCLC</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>


HTML
<div class="container hidden">
  <div class="menu">
    <div id="mysection" class="dropdown">
      <button>Current ETCLC Participants</button>
      <div class="dropdown-content">
        <a href="https://healthcarecommunities.b2clogin.com/healthcarecommunities.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1_ETCLC_signup&client_id=07e0f659-b33e-444d-a279-b6e0d59f8e67&nonce=defaultNonce&redirect_uri=https%3A%2F%2Fetclc.healthcarecommunities.org%2Fwelcome%2F&scope=openid&response_type=id_token&prompt=login">Register for the ETCLC Reporting System</a>
        <a href="https://etclc.healthcarecommunities.org/">ETCLC Progress Tracking System</a>
      </div>
    </div>
    <div id="mysection" class="dropdown">
      <button>Participating Organizations</button>
      <div class="dropdown-content">
        <a href="https://qnetconfluence.cms.gov/display/ETCLC/opo">Organ Procurement Organizations</a>
        <a href="https://qnetconfluence.cms.gov/display/ETCLC/transplant+centers">Transplant Centers</a>
        <a href="https://qnetconfluence.cms.gov/display/ETCLC/donor+hospitals">Donor Hospitals</a>
      </div>
    </div>
    <div id="mysection" class="dropdown">
      <button>Resources</button>
      <div class="dropdown-content">
        <a href="https://qnetconfluence.cms.gov/display/TAQILC/Change+Packages">Change Packages</a>        
		<a href="https://app.powerbi.com/view?r=eyJrIjoiMmJmMDMyYjktNTVmNS00ZDBmLWE4NDAtNjVlNWU3OThmNzE4IiwidCI6Ijc0MjZkZWJmLWQ4MDItNDFkMi05ZGJjLTJjNjk0YmRlYjZmZiIsImMiOjF9">National Dashboard</a>        </div>
    </div>
<div id="mysection" class="dropdown">
      <button>Patient and Donor Info</button>
      <div class="dropdown-content">
        <a href="https://donatelife.net/">Become a Donor</a>
        

      </div>
    </div>

    <div id="mysection" class="dropdown">
      <button>About ETCLC</button>
      <div class="dropdown-content">
        <a href="https://qnetconfluence.cms.gov/display/ETCLC/End+Stage+Renal+Disease+Treatment+Choices+Learning+Collaborative?preview=/202386541/209161617/ETCLC%20Recruitment%20Talking%20Points_FINAL2.pdf">FAQ's</a>
        <a href="https://qnetconfluence.cms.gov/display/ETCLC/End+Stage+Renal+Disease+Treatment+Choices+Learning+Collaborative?preview=/202386541/394202262/ETCLC%20Committment%20for%20Results%2010.27.21_fillable-2-10-23.pdf">Learn More</a>
        <a href="https://qnetconfluence.cms.gov/display/ETCLC/National+Faculty">National Faculty</a>
        <a href="https://qnetconfluence.cms.gov/display/ETCLC/LCC">Leadership Coordinating Council</a>
      </div>
    </div>
  </div>
  <div class="right">    
<a href="https://www.linkedin.com/company/etclc-collaborative/" target="_blank">    
<img class="confluence-embedded-image confluence-thumbnail" draggable="false" width="50" height="50" src="https://qnetconfluence.cms.gov/download/thumbnails/517477753/LI-In-Bug.png?version=1&modificationDate=1703177057132&api=v2" data-image-src="https://qnetconfluence.cms.gov/download/attachments/517477753/LI-In-Bug.png?version=1&modificationDate=1703177057132&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="517477754" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="LI-In-Bug.png" data-base-url="https://qnetconfluence.cms.gov" data-linked-resource-content-type="image/png" data-linked-resource-container-id="517477753" data-linked-resource-container-version="26" alt=""></a>   
</div>
</div>




...

Alert
titleAbout this site
typeInfo

This site is intended for healthcare professionals seeking information on the CMS/HRSA-sponsored End Stage Renal Disease Treatment Choices Learning Collaborative.  If you are a patient seeking information on a kidney transplant click HERE.


CSS Stylesheet
.hidden {
	display: none;
}
.container {
  /*display: flex;*/
  display: inline;
  width: 100%;
  justify-content: space-evenly;
}

.container>div {
  flex: 1;
  /*grow*/
}

.menu {
  float: left;
  height: 60px;
  width: 90%;
  background-color: #1870b8;
}

.menu a {
  display: block !important;
  color: #FFF !important;
  padding: auto !important;
  text-decoration: none !important;
  text-align: left !important;
  white-space: nowrap !important;
}

button {
  border: none;    
  /*font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif !important";*/
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}


button:hover {
  color: #fdce08;
}

.sectionColumnWrapper {
  overflow-x: visible !important;
}

.expand-control {
  font-size: 16px !important;
}

#mysection {
  z-index: 100;
  /*  width: 175px;*/
  justify-content: space-between;
}

.dropdown {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  /*  width: 175px;*/
  padding-left: 25px;
}

button {
  font-size: 20px;
  color: #FFF;
  background-color: #1870b8;
  padding: 10px;
  height: 50px;
}

.center {
  margin: auto;
  width: 75%;
  padding: 0px;
}

.innerCell {
  overflow-x: visible !important;
}



.dropdown-content {
  display: none;
  position: absolute;
  top: 50px;
  /*right: 35px;*/
  left: 0px;
  width: auto;
  min-width: 120px;
  overflow: auto;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
  background-color: #FFFFFF;
  /*font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif !important";*/
  font-family: inherit;    
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5em;
}

.dropdown-content:hover {
  background: "#fff";
}

.dropdown:hover .dropdown-content {
  display: block;
  max-height: 550px;
  animation-name: wfc;
  animation-duration: 1s;
}

.dropdown-content a {
  display: block !important;
  color: #000000 !important;
  /*padding: 5px !important;*/
  text-decoration: none !important;
  text-align: left !important;
  white-space: nowrap !important;
  height: 100%;
  padding: 0.6em 20px;
  white-space: nowrap;
}

.dropdown-content a:hover {
  color: #003399;
  background: #f0f0f0;
}


@media screen and (max-width: 1525px) {
  .container {
    display: table;
  }

  @keyframes wfc {
    from {
      opacity: 0;
      transform: scaleX(0.01)
    }

    to {
      opacity: 1;
      transform: scaleX(1)
    }
  }
}

table.confluenceTable th.confluenceTh {
  background-color: #FFF !important;
}


#mysection1 {
  display: block;
}



* {
  box-sizing: border-box;
}

.right {
  background-color: #ffffff;
  float: left;
  width: 10%;
  padding: 0px;
  margin-top: 0px;
  text-align: center;
}

...