Cum Adaug Un Meniu Sofisticat Ca Pe Agamers?

Visan15 · February 11, 2015

Salut , probabil sa mai postat sau nu .. am cautat prin forum insa probabil nu suficient.

Imi poate oferi cineva acest meniu ? DOAR meniul .... gen codu +css si imagini (nu neaparat, le pot inlocui).

Demo img :http://uploadimage.ro/img.php?image=7015_menu_98wd.png

demo site : http://forum.agamers.ro/

Multumesc.

+Data · February 11, 2015

Poftima tema http://invision-virus.com/forum/index.php/files/file/538-agamers-v4-own-edit/sper ca stii sa le scoti...

Visan15 · February 11, 2015

Multumesc , tema o gasisem si eu intr-un final .. insa ma bate codul .. e incalcit si nu il inteleg ... m-am tot chinuit ...

+Data · February 11, 2015

Da-mi un PM cu tema pe care vrei sa pui meniu

gadeas · February 11, 2015

Codu de la meniu care il adaugi in globalTemplate:

<header id="header">
                <if test="brandingBar:|:ipsRegistry::$applications[ $this->registry->getCurrentApplication() ]['hasCustomHeader']">
                      {parse template="overwriteHeader" group="{current_app}_global" params=""}</if>
                    
                    <div id="logo"><a href='{$this->settings['board_url']}' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'><img class="logo" src="{style_images_url}/logo_v2.png" alt="Logo principal al forumului" /></a></div>

<div id="menu">
	<ul class="menu">
		<li>
			<a href="http://forum.agamers.ro/">
				<i class="fa fa-home"></i>
				<strong>Forum</strong>
				<small>Pagina principala</small>
			</a>
		</li>
		
		<li>
			<a href="http://forum.agamers.ro/members/">
				<i class="fa fa-users"></i>
				<strong>Utilizatori</strong>
				<small>Listă utilizatori</small>
			</a>
		</li>
		
		<li>
			<a href="http://forum.agamers.ro/index.php?app=ibEconomy">
				<i class="fa fa-shopping-cart"></i>
				<strong>Shop</strong>
				<small>Cumpara orice</small>
			</a>
			<ul>
				<li><a href="http://forum.agamers.ro/index.php?app=ibEconomy&tab=buy&area=checkout">Checkout</a></li>
				<li><a href="http://forum.agamers.ro/index.php?app=ibEconomy&tab=me&area=my_shopitems">My Inventory</a></li>
				<li><a href="http://forum.agamers.ro/index.php?app=ibEconomy&tab=global&area=transactions">Transactions</a></li>
				<li><a href="http://forum.agamers.ro/index.php?app=ibEconomy&tab=global&area=rankings">Ranking</a></li>
			</ul>
		</li>
		
		<li>
			<a href="http://forum.agamers.ro/files/">
				<i class="fa fa-download"></i>
				<strong>Resurse</strong>
				<small>Downloadeaza resurse</small>
			</a>
			<ul>
				<li><a href="http://forum.agamers.ro/files/category/1-counter-strike-16/">Counter-Strike 1.6</a></li>
				<li><a href="http://forum.agamers.ro/files/category/2-counter-strike-global-offensive/">Counter-Strike CS:GO</a></li>
				<li><a href="http://forum.agamers.ro/files/category/3-minecraft/">Minecraft</a></li>
			</ul>
		</li>

		<li>
			<a href="http://forum.agamers.ro/page/csgo_tinta.html">
				<i class="fa fa-crosshairs"></i>
				<strong>Tinta CS:GO</strong>
				<small>Generator țintă</small>
			</a>
		</li>
		
		<li>
			<a href="http://forum.agamers.ro/page/servere.php">
				<i class="fa fa-list"></i>
				<strong>Servere</strong>
				<small>Listă servere</small>
			</a>
		</li>
	</ul>
</div>

<if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">{parse template="quickSearch" group="global" params=""}</if>

</header>

Stilu pentru meniu, vine adaugat in ipb_styles.css jos de tot:

/* =Header
-------------------------------------------------------------- */
header {
    background-color: #000;
    background-color: rgba(0,0,0,0.9);
    width: 100%;
    height: 150px;
    overflow: inherit;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s; 
}

header .logo {
    display: inline-block;
    height: 42px;
    line-height: 150px;
    float: left;
    font-family: "Oswald", sans-serif;
    font-size: 60px;
    color: white;
    font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; 
    margin-left: 50px;
}

header nav {
    display: inline-block;
    float: right; 
}

    header nav a {
      line-height: 150px;
      margin-left: 20px;
      color: #9fdbfc;
      font-weight: 700;
      font-size: 18px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; 
    }

    header nav a:hover {
        color: white; 
    }

header.smaller {
    height: 55px; 
}

    header.smaller .logo {
      width: auto;
      height: 30px;
      margin-left: 15px;
    }

    header.smaller #logo {
      height: 40px;
      margin-top: 15px;
    }

    header.smaller #menu {
      height: 55px;
    }

    header.smaller .menu {
      margin-top: 2px;
      height: 53px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; 
    }
    
    header.smaller .menu li a small {
      opacity: 0;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
    }

    header.smaller #search {
      margin-top: 7px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
    }

    header.smaller .menu li:hover > ul {
      top: 60px;
    }

    header.smaller .menu li:hover a small {
      opacity: 0;
      -webkit-animation: moveFromRight 0ms ease-in-out;
      -moz-animation: moveFromRight 0ms ease-in-out;
      -ms-animation: moveFromRight 0ms ease-in-out;
      -o-animation: moveFromRight 0ms ease-in-out;
      animation: moveFromRight 0ms ease-in-out;
    }

#logo {
    width: 33%;
    height: 42px;
    float: left;
    margin-top: 55px;
}

#logo a img {
    opacity: 0.7;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; 
}

#logo a img:hover {
    opacity: 1;
}

#menu {
    width: 33%;
    margin: 0 auto;
    display: inline-block;
}

Si pentru iconitele de la meniu iti va trebui tot in globalTemplate, intre etichetele <head>:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Visan15 · February 11, 2015

Nu merge .. http://oi61.tinypic.com/2m7aq6b.jpg

gadeas · February 11, 2015

Da, my bad, am uitat si cealanta parte, tot in ipb_styles.css jos de tot adauga:

.menu {
    list-style: none;
    margin: 40px auto 0px;
    text-align: center;
    background: transparent;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; 
}

.menu li {
    display: inline-block;
}

.menu li a {
    display: block;
    text-decoration: none;
    padding: 3px 10px;
    text-align: center;
    color: #A2A2A2;
}

.menu li a i {
    display: block;
    font-size: 30px;
}

.menu li a strong {
    display: block;
    text-transform: uppercase;
}

.menu li a small {
    display: block;
    font-size: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; 
}

.menu li a i, .menu li a strong, .menu li a small {
    position: relative;
    transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
}

/*.menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}

.menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}

.menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}*/

.menu li:hover>a {
    color: #fff;
}

.menu li a.active {
    position: relative;
    color: #fff;
    border: 0;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    margin-top: -4px;
}

.menu li a.active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 45%;
    border-top: 5px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

@-webkit-keyframes
    moveFromTop {
        from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@-webkit-keyframes
    moveFromLeft {
        from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@-webkit-keyframes
    moveFromRight {
        from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.menu li ul {
    position: fixed;
    height: auto;
    min-width: 200px;
    padding: 0;
    margin: 0;
    ;
    background-color: rgba(0, 0, 0, 0.9);
    border-top: 4px solid #000;
    opacity: 0;
    visibility: hidden;
    transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -ms-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -webkit-transition: all 100ms linear;
    top: 130px;
    z-index: 99999;
}

/* ARROW
.menu li ul:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 48%;
    border-bottom: 5px solid #000;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
*/

.menu li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 110px;
}

.menu li ul li {
    float: none;
    display: inline; 
}

.menu li ul li a {
    padding: 10px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #000;
}

.menu li ul li a i {
    font-size: 16px;
    display: inline-block;
    margin: 0 10px 0 0;
}

.menu li.float {
    float: right;
}

Kazemir · May 18, 2016

Dar meniul nu se face mai mic cand scrolez. De ce ? Cum aveai tu pe comunitate.

Sign In

Cum Adaug Un Meniu Sofisticat Ca Pe Agamers?

Recommended Posts

Visan15

Link to comment

Share on other sites

+Data

Link to comment

Share on other sites

Visan15

Link to comment

Share on other sites

+Data

Link to comment

Share on other sites

gadeas

Link to comment

Share on other sites

Visan15

Link to comment

Share on other sites

gadeas

Link to comment

Share on other sites

Kazemir

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Activity

Browse

Important Information