Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign in to follow this  

    Top Menu with Modals

       (1 review)

    A simple top menu box thing with space for pop up modals, staff, events, announcements and links. As ever, use it however you like, edit however you like, and it sure would be nice if you provided a link back to RPG-I so that other people can use the code if they want 🙂


    Actual Template Responsive

    We're Awesome

    Here's why we're awesome. The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg! The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!

    The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!

    Announcements

    Announcement 1
    The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg! The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg! The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!
    X

    Hi!

    More information can go into here. A link
    X

    Hi!

    More information can go into here.
    X

    Hi!

    More information can go into here.

    Template code

    <!-- informational header -->
    <div id="header_kit">
      <div class="header_kt">
        <!-- about us window -->
        <div class="about_us">
          <h3>We're Awesome</h3>
          Here's why we're awesome. The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg! The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!
          <p />
          The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!
          <div class="links">
            <div>
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
            <div>
              <a class="btn_kit" href="#open_1">Modal 1</a>
              <a class="btn_kit" href="#open_2">Modal 2</a>
              <a class="btn_kit" href="#open_3">Modal 3</a>
            </div>
          </div>
        </div>
        <!-- end about us window -->
        
        <!-- staff window -->
        <div class="staff">
          <a href="#"><img src="https://i.ibb.co/m0Dr6LB/kit-av-round.png"><div>Name</div></a>
          <a href="#"><img src="https://i.ibb.co/m0Dr6LB/kit-av-round.png"><div>Name</div></a>
          <a href="#"><img src="https://i.ibb.co/m0Dr6LB/kit-av-round.png"><div>Name</div></a>
        </div>
        <!-- end staff window -->
        
        <!-- events window -->
        <div class="events">
          <h3>Announcements</h3>
          <div>Announcement 1</div>
          The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg! The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg! The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!
        </div>
        <!-- end events window -->
        
      <!-- add modals here -->
    <div id="open_1" class="kit_modal">
      <div>
        <a href="#" title="Close" class="kit_close">X</a>
        <h4>Hi!</h4>
        More information can go into here. <a href="https://rpginitiative.com">A link</a>
      </div>
    </div>
      
      <div id="open_2" class="kit_modal">
      <div>
        <a href="#" title="Close" class="kit_close">X</a>
        <h4>Hi!</h4>
        More information can go into here.
      </div>
    </div>
      
      <div id="open_3" class="kit_modal">
      <div>
        <a href="#" title="Close" class="kit_close">X</a>
        <h4>Hi!</h4>
        More information can go into here.
      </div>
    </div>
      <!-- end modals -->
    </div>
    </div>
      <!-- end informational header -->
    
    <style>
    #header_kit {
      line-height: 150%;
      font-family: sans-serif;
      background: #1a1a1a;
      color: #efefef;
      text-shadow: 0 0 5px #000
    }
    
    #header_kit a {
      color: #ccc;
      text-decoration: none
    }
    
    .header_kt {
      display: flex
    }
    
    .about_us,
    .events {
      padding: 10px;
    }
    
    .about_us h3,
    .events h3 {
      margin: 0 0 1em 0;
      border-bottom: 1px solid #ccc
    }
    
    .events h3 {
      text-align: right
    }
    
    .events > div {
      text-transform: uppercase;
      color: #dbc5b6
    }
    
    .staff {
      padding: 1em 10px;
      flex-basis: 100px;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }
    
    .staff a {
      opacity: .8;
      transition: 1s;
      display: block;
      padding: 5px;
      text-align: center
    }
    
    .staff a:hover {
      opacity: 1;
      transition: 1s
    }
    
    .staff img {
      height: 75px;
      border-radius: 100%
    }
    
    .links {
      display: table;
      width: 100%;
      border-spacing: 5px
    }
    
    .links > div {
      display: table-row
    }
    
    #header_kit .links > div > a {
      color: #ccc;
      transition: 1s;
      transition-timing-function: linear;
      display: table-cell;
      padding: 10px;
      background: rgba(0,0,0, .1);
      text-align: center;
      border: 1px solid rgba(0,0,0, .2);
      box-shadow: inset 0 0 5px rgba(0,0,0, .5)
    }
    
    #header_kit .links > div > a:hover {
      transition-timing-function: linear;
      transition: 1s;
      background: rgba(0,0,0, .3);
      color: #efefef
    }
    
    .kit_modal {
      position: fixed;
      z-index: 99;
      background: rgba(0,0,0, .8);
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      transition: all .5s
    }
    
    .kit_modal:target {
      opacity: 1;
      visibility: visible;
      pointer-events: auto
    }
    
    .kit_modal > div {
      color: #aaa;
      border-radius: 5px;
      max-width: 900px;
      min-width: 300px;
      width: 50vw;
      background: #0a0a0a;
      padding: 1%;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      position: absolute
    }
    
    .kit_close {
      display: block;
      padding: 5px;
      float: right;
      clear: left
    }
    
    @media screen and (max-width: 767px) {
      .header_kt {
        flex-wrap: wrap
      }
    
      .staff {
        flex-direction: row
      }
    </style>
    Sign in to follow this  


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

    Thatmanzai

      

    I would add some effect, but the result itself is quite good

    Share this review


    Link to review



×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.