1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

JQuery Navbar Possible?

Discussion in 'Styling and Customization Questions' started by taylor_smith, Mar 12, 2012.

  1. taylor_smith

    taylor_smith Well-Known Member

    All of my portals are using a common navigation bar. I think it's powered by jquery. An example may be viewed at the top of this page: http://gw2.stratics.com/. A picture may be viewed here.

    It'd be amazing to include this above our forums. Is something like this even possible? Is there some code I can just add to header templates?
     
  2. Forsaken

    Forsaken Well-Known Member

    You can do this by modifying the PAGE_CONTAINER template, just add the code above the following:

    Code:
    <div id="headerMover">
     <div id="headerProxy"></div>
     
    taylor_smith likes this.
  3. taylor_smith

    taylor_smith Well-Known Member

    Cool! Thank you for this tip. :)
     
  4. taylor_smith

    taylor_smith Well-Known Member

    Whenever I tried to add the code, page container was squished, moved off center, and the navbar links appeared below the content. Here's a screen shot:

    http://img805.imageshack.us/img805/9850/navheader.jpg

    I'm afraid I don't know the first thing about jquery, so I am resorting to CSS and HTML. This is the code I tried to add above the lines you mentioned:

    Code:
    <!-- begin navheader -->
     
    <style type="text/css">
    .gradient {
    background-color: #464646;
        background-image: -moz-linear-gradient(center bottom , #373737, #464646 5px);
        background-image: -ms-linear-gradient(bottom,#373737,#464646 5px);
        background-image: -o-linear-gradient(bottom,#373737,#464646 5px);
        background-image: -webkit-gradient(linear,left bottom,left top,from(#373737),to(#464646));
        background-image: -webkit-linear-gradient(bottom,#373737,#464646 5px);
        background-image: linear-gradient(bottom,#373737,#464646 5px);
        color: #CCCCCC;
        direction: ltr;
        font: 13px/28px sans-serif;
        height: 28px;
        left: 0;
        min-width: 600px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99999;
    }
    </style>
     
    <center>
     
    <table width="100%" height="28px" border="0" cellspacing="0" cellpadding="4px">
    <tr class="gradient" >
      <td align="left" valign="middle" nowrap >&nbsp;<a class="navTitle" href="http://vboards.stratics.com" target="_parent"><font size="2" face ="sans-serif" color="#CCCCCC" >Stratics Forums</font></a></td>
    <!-- /www/uoss/shared/navmenu_ns.html -->
    <td align="left" valign="center" nowrap>
     
    <table border="0" cellspacing="0" cellpadding="0" align="left" bgcolor="#373737" width="498">
      <tr align="right">
      <td valign="center" nowrap width="166">
        <form action="" target="_parent">
        <select name="network" onChange="location=options[selectedIndex].value;">
          <option value="">Stratics Network</option>
          <option class="navSubmenuLink">-----------------------</option>
          <option value="http://www.stratics.com">Stratics Central</option>
    <!--  <option value="http://links.stratics.com/">Stratics Links</option> -->
    <!--  <option value="http://www.stratics.com/content/interviews/interviews.php">Interviews</option> -->
    <!--  <option value="http://www.stratics.com/content/previews/previews.php">Previews</option> -->
    <!--  <option value="http://www.stratics.com/content/gamereviews/reviews.php">Reviews</option> -->
    <!--  <option value="http://ageofconan.stratics.com">Age of Conan</option> -->
    <!--  <option value="http://aion.stratics.com">Aion</option> -->
          <option value="http://combatarms.stratics.com">Combat Arms</option>
          <option value="http://eq2beta.stratics.com">Everquest II</option>
          <option value="http://eve.stratics.com">EVE</option>
    <!--  <option value="http://sims.stratics.com">EA-Land/TSO</option>-->
    <!--  <option value="http://ffxi.stratics.com">FINAL FANTASY XI</option>-->
          <option value="http://guildwars2.stratics.com">Guild Wars 2</option>
          <option value="http://lol.stratics.com">League of Legends</option>
          <option value="http://l2beta.stratics.com">Lineage 2</option>
          <option value="http://lotro.stratics.com">Lord of the Rings Online</option>
    <!--  <option value="http://potbs.stratics.com">Pirates of the Burning Sea</option>-->
          <option value="http://rift.stratics.com">RIFT</option>
          <option value="http://runescape.stratics.com">RuneScape</option>
          <option value="http://swg.stratics.com">Star Wars Galaxies</option>
          <option value="http://swtor.stratics.com">Star Wars: The Old Republic</option>
    <!--  <option value="http://stargateworlds.stratics.com">Stargate Worlds</option>      -->
          <option value="http://toontown.stratics.com">ToonTown</option>
          <option value="http://uo2.stratics.com">Ultima Online</option>
          <option value="http://war.stratics.com">Warhammer Online</option>
          <option value="http://wowbeta.stratics.com">World of Warcraft</option>
    <!--  <option value="" align="center" class="navSubmenuLink">-----------------------</option> -->
    <!--  <option value="http://chat.stratics.com">Chat/IRC</option> -->
    <!--  <option value="http://boards.stratics.com">Forums</option>    -->
        </select>
        </form>
      </td>
      <td valign="center" nowrap width="166">
        <form>
        <select name="community" onChange="location=options[selectedIndex].value;">
          <option value="">Stratics Forums</option>
          <option class="navSubmenuLink">-----------------------</option>
          <option value="http://vboards.stratics.com/stratics-central-forums/">Stratics Central</option>
    <!--  <option value="http://vboards.stratics.com/forumdisplay.php?f=82">Age of Conan</option> -->
          <option value="http://vboards.stratics.com/combat-arms/">Combat Arms</option>
    <!--  <option value="http://vboards.stratics.com/forumdisplay.php?f=4">EA-Land/TSO</option> -->
          <option value="http://vboards.stratics.com/everquest-ii-stratics-forums/">Everquest II</option>
          <option value="http://vboards.stratics.com/eve-stratics-forums/">EVE</option>
          <option value="http://vboards.stratics.com/final-fantasy-xi-stratics-forums/">Final Fantasy XI</option>
          <option value="http://vboards.stratics.com/guild-wars-2-forums/">Guild Wars 2</option>
          <option value="http://vboards.stratics.com/league-legends-forums/">League of Legends</option>
          <option value="http://vboards.stratics.com/lineage-2-stratics-forums/">Lineage 2</option>
          <option value="http://vboards.stratics.com/lord-rings-online-stratics-forums/">Lord of the Rings Online</option>
          <option value="http://vboards.stratics.com/pirates-burning-sea-stratics-forums/">Pirates of the Burning Sea</option>
     
    <!--  <option value="http://vboards.stratics.com/pirates-caribean/">Pirates of the Caribbean</option> -->
          <option value="http://vboards.stratics.com/rift-stratics-forums/">RIFT</option>
          <option value="http://vboards.stratics.com/runescape-stratics-forums/">RuneScape</option>
          <option value="http://vboards.stratics.com/second-life-forums/">Second Life</option>
          <option value="http://vboards.stratics.com/star-trek-online-forums/">Star Trek Online</option>
          <option value="http://vboards.stratics.com/starwars-galaxies-stratics-forums/">Star Wars Galaxies</option>
          <option value="http://vboards.stratics.com/swtor-forums/">Star Wars: The Old Republic</option>
          <option value="http://vboards.stratics.com/toontown-stratics-forums/">ToonTown</option>
          <option value="http://vboards.stratics.com/uo-stratics-forums/">Ultima Online</option>
          <option value="http://vboards.stratics.com/warhammer-online-stratics-forums/">Warhammer Online</option>
          <option value="http://vboards.stratics.com/world-warcraft-stratics-forums/">World of Warcraft</option>
          <option value="http://vboards.stratics.com/young-stratics-portals/">Other Stratics Titles</option>
          <option value="" align="center" class="navSubmenuLink">-----------------------</option>
          <option value="http://vboards.stratics.com/stratics-off-topic/">Off Topic</option>
    <!--  <option value="http://chat.stratics.com/content/java/sponsoredchat.php">IRC Chat</option> -->
        </select>
        </form>
      </td>
    </tr>
    </table></center>
     
     
     
    <!-- end navheader -->
     

Share This Page