Pentru a accesa toate paginile forumului
te rugăm să te înregistrezi
[ Cereri şabloane · Ultimile postări · Membrii · Regulamentul forumului · Căutare · RSS · Photoshop ]
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Aspecte » Aspectul Meniului [Vertical]
Aspectul Meniului [Vertical]
OmulPaianjenData: Duminică, 2012-07-22, 8:15 PM | Mesaj # 6
Neconectat
 Pasul 1: Panoul de Control - Design - Administrarea design-ului (CSS) - adăugăm la urmă stilul:

Code
[class*="icon-"] {   
   display: block;   
   width: 20px;   
   height: 20px;   
   background-image: url("http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Vertical/icons.png");   
   background-repeat: no-repeat;   
   background-color: transparent;   
   border: 0;   
   color: transparent;   
   font: 0/0 a;   
   text-shadow: none;   
   }   

   .icon-friends {   
   background-position: 0 0;   
   }   

   .icon-video {   
   background-position: -20px 0;   
   }   

   .icon-photo {   
   background-position: -40px 0;   
   }   

   .icon-podcast {   
   background-position: -60px 0;   
   }   

   .vnav {   
   width: 200px;   
   overflow: hidden;   
   background: #fff;   
   border: 1px solid #1d1f22;   
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);   
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);   
   }   
   .vnav a {   
   display: block;   
   line-height: 34px;   
   text-decoration: none;   
   }   
   .vnav li:last-child .vnav-item {   
   border-bottom-color: #50575f;   
   }   
   .vnav li:last-child .vnav-subnav {   
   border-bottom-color: #fff;   
   }   

   .vnav-item {   
   position: relative;   
   padding: 0 12px 0 37px;   
   color: #fff;   
   font-size: 13px;   
   text-shadow: 0 1px rgba(0, 0, 0, 0.35);   
   border-top: 1px solid #878e96;   
   border-bottom: 1px solid #333740;   
   background-color: #505968;   
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #707a84), color-stop(100%, #505968));   
   background-image: -webkit-linear-gradient(top, #707a84, #505968);   
   background-image: -moz-linear-gradient(top, #707a84, #505968);   
   background-image: -ms-linear-gradient(top, #707a84, #505968);   
   background-image: -o-linear-gradient(top, #707a84, #505968);   
   background-image: linear-gradient(top, #707a84, #505968);   
   -webkit-transition: opacity 0.15s;   
   -moz-transition: opacity 0.15s;   
   -ms-transition: opacity 0.15s;   
   -o-transition: opacity 0.15s;   
   transition: opacity 0.15s;   
   }   
   .vnav-item:hover {   
   opacity: .95;   
   }   
   .active .vnav-item, .vnav-item:active {   
   opacity: 1;   
   border-top-color: #6ad2ef;   
   border-bottom-color: #1c638f;   
   -webkit-box-shadow: 0 1px #bbbbbb, 0 2px #e9ebe8;   
   box-shadow: 0 1px #bbbbbb, 0 2px #e9ebe8;   
   background-color: #259bdb;   
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #44c5ec), color-stop(100%, #259bdb));   
   background-image: -webkit-linear-gradient(top, #44c5ec, #259bdb);   
   background-image: -moz-linear-gradient(top, #44c5ec, #259bdb);   
   background-image: -ms-linear-gradient(top, #44c5ec, #259bdb);   
   background-image: -o-linear-gradient(top, #44c5ec, #259bdb);   
   background-image: linear-gradient(top, #44c5ec, #259bdb);   
   }   
   .active .vnav-item .vnav-counter, .vnav-item:active .vnav-counter {   
   background: #2471a9;   
   }   
   .vnav-item i {   
   position: absolute;   
   top: 7px;   
   left: 9px;   
   }   

   .vnav-counter {   
   float: right;   
   margin-top: 8px;   
   padding: 0 6px;   
   line-height: 18px;   
   font-size: 11px;   
   background: #464e59;   
   border-radius: 9px;   
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);   
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);   
   }   

   .vnav-subnav {   
   display: none;   
   border-bottom: 1px solid #404348;   
   }   
   .active .vnav-subnav {   
   display: block;   
   }   
   .vnav-subnav a {   
   padding: 0 12px 0 16px;   
   font-size: 12px;   
   color: #838a90;   
   border-bottom: 1px solid #eee;   
   }   
   .vnav-subnav a:before {   
   content: '';   
   display: inline-block;   
   width: 0;   
   height: 0;   
   margin-right: 8px;   
   border: 4px outset transparent;   
   border-left: 4px solid #bbb;   
   }   
   .vnav-subnav a:hover {   
   background: #f8f9fb;   
   }   
   .vnav-subnav .vnav-counter {   
   color: #999;   
   background: #fcfcfc;   
   -webkit-box-shadow: inset 0 0 0 1px #dcdcdc;   
   box-shadow: inset 0 0 0 1px #dcdcdc;   
   }   
   .vnav-subnav li:last-child a {   
   border-bottom-color: #fff;   
   }


Pasul 2: Panoul de Control - Design - Administrarea design-ului (şabloane) - unde vă trebuie meniul, adăugați codul:

Code
<nav class="vnav">  
  <ul class="vnav-menu">  
  <li>  
  <a href="index.html" class="vnav-item">  
  <i class="icon-friends"></i>  
  Prieteni  
  <span class="vnav-counter">6</span>  
  </a>  
  </li>  
  <li>  
  <a href="index.html" class="vnav-item">  
  <i class="icon-video"></i>  
  Filme  
  <span class="vnav-counter">8</span>  
  </a>  
  </li>  
  <li class="active">  
  <a href="index.html" class="vnav-item">  
  <i class="icon-photo"></i>  
  Poze  
  <span class="vnav-counter">39</span>  
  </a>  
  <ul class="vnav-subnav">  
  <li><a href="index.html">Muzică <span class="vnav-counter">16</span></a></li>  
  <li><a href="index.html">Jocuri <span class="vnav-counter">23</span></a></li>  
  </ul>  
  </li>  
  <li>  
  <a href="index.html" class="vnav-item">  
  <i class="icon-podcast"></i>  
  Articole
  <span class="vnav-counter">42</span>  
  </a>  
  </li>  
  </ul>  
  </nav>


Rezultatul:
 
OmulPaianjenData: Luni, 2012-08-06, 11:57 AM | Mesaj # 7
Neconectat
 Unde aveți nevoie de acest meniu, adăugați codurile:

Code
<div class="meniul" style="margin-bottom:20px;">
<img src="http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Vertical/imagini_meniu_jocuri.gif" style="float:left;border:0px;width:34px;">
<a href="/">3D Action Games</a>
<a href="/">3D Adventure Games</a>
<a href="/">3D Basketball Games</a>
<a href="/">3D Bike Games</a>
<a href="/">3D Car Games</a>
<a href="/">3D Fighting Games</a>
<a href="/">3D Flying Games</a>
<a href="/">3D Football Games</a>
<a href="/">3D Horse Games</a>
<a href="/">3D Multiplayer Games</a>
<a href="/">3D Pool Games</a>
<a href="/">3D Racing Games</a>
<a href="/">3D Shooting Games</a>
<a href="/">3D Truck Games</a>
<a href="/">3D War Games</a>
<a href="/">3D Zombie Games</a>
</div>
<style>.meniul {font-size:12px;text-align:left;font-family:verdana;font-weight:bold;}
.meniul a{color:black;float:left;width:155px;height:22px;background:#d6f0ff;padding-top:4px;padding-left:5px;border-top:1px solid gray;}
   .meniul a:hover {background:#000000;color:black}</style>


Rezultatul:
 
OmulPaianjenData: Miercuri, 2012-08-08, 10:36 PM | Mesaj # 8
Neconectat
 Pasul 1: Panoul de Control - Design - Administrarea design-ului (CSS) - adăugăm stilurile:

Code
/* Meniu */   
.accordion h3 {font-size : 11px;color : #fff;padding-left : 10px;background : url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Vertical/accordion.png) no-repeat right 0;line-height :25p;height : 25px;cursor : pointer;margin : 0;text-align : left;font-weight : bold;}   
.accordion h3:hover {background : url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Vertical/accordion.png) no-repeat right -25px;color : #ffa;}   
.accordion h3.active {background : url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Vertical/accordion.png) no-repeat right -50px;}   
.accordion h3.active:hover {background : url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Vertical/accordion.png) no-repeat right -75px;}   
.accordion p {display : none;margin : 0;padding : 7px 0 7px 7px;}   
.accordion a {font-size : 11px;color : #fff;text-align : left;font-weight : bold;padding-left : 15px;}   
.accordion p.linked a {background : url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Vertical/bull.gif) no-repeat 0 50%;}   
/* ---------- */


Pasul 2: Panoul de Control - Design - Administrarea design-ului (şabloane) - pe paginile unde veți dori meniul, înainte de </head> adăugați codul:

Code

<script language="javascript" type="text/javascript" src="http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Vertical/jquery.js"></script>   
<script language="javascript" type="text/javascript" src="http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Vertical/accordion.js"></script>


Pasul 3: Panoul de Control - Design - Administrarea design-ului (şabloane) - codul meniului îl adăugați unde aveți nevoie de meniu.

Code
<div class="accordion">   
   <h3>Meniul principal</h3>   
   <p class="linked">   
   <a href="/">Pagina principală</a><br/>   
   <a href="/gb/">Carte pentru oaspeţi</a><br/>   
   <a href="/index/0-3">Contactați-ne</a><br/>   
   <a href="/board/">Anunțuri</a><br/>   
   <a href="/publ/">Catalog de articole</a><br/>   
   <a href="/dir/">Catalog de saituri</a><br/>   
   <a href="/blog/">Blogul nostru</a><br/>   
   <a href="/faq/"><font color="DarkOrange">FAQ (întrebare/răspuns)</font></a><br/>   
   </p>   
   <h3>Calculator</h3>   
   <p class="linked">   
   <a href="/load/">Catalog de fișiere</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   </p>   
   <h3>Odihnește-te</h3>   
   <p class="linked">   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   </p>   
   <h3>Filme subtitrate</h3>   
   <p class="linked">   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   <a href="/">Denumirea</a><br/>   
   </div>   
   <br/>


Rezultatul:
 
OmulPaianjenData: Luni, 2012-08-20, 2:08 PM | Mesaj # 9
Neconectat
 Meniu dual

Code
<table border="0" cellpadding="0" cellspacing="0" width="90%">   
<tr>   
<td valign="top" width="210" style="padding:5px 1px 0 5px;">   
<div style="width:100%;">   
<!-- <2 căsută> -->   
<div id="isInMo" <div class="MnotActive">   
<!-- <Conținutul 1> -->   
$SMENU_1$<!-- </Conținutul 1> -->   
</div> </div>   
<!-- </2 căsută> -->   

<!-- <1 căsută> -->   
<div style="display:none" id="noInMo"> <div class="MnotActive">   
<!-- <Conținutul 2> -->   

$CATEGORIES$   

<!-- </Conținutul 2> -->   

<!-- </1 căsută> -->   

<script type="text/javascript">new _uMenu('musers');new _uMenu('msite');new _uMenu('mforum');new _uMenu('mload');new _uMenu('mgb');new _uMenu('msearch');new _uMenu('mmail');new _uMenu('mpoll');new _uMenu('mstat');</script>   
</div></div>   
<script type="text/javascript">function showmods(t) {if (t)   
{document.getElementById('instMods').className='MnotActive1';document.getElementById('uninstMods')   
.className='Mactive';document.getElementById('isInMo').style.display='none';document.getElementById('noInMo')   
.style.display='';document.body.focus();}else   
{document.getElementById('instMods').className='Mactive';document.getElementById('uninstMods')   
.className='MnotActive';document.getElementById('noInMo').style.display='none';document.getElementById('isInMo')   
.style.display='';document.body.focus();}}</script>   
<br><table cellpadding="0" cellspacing="0" width="100%">   

<td width="25%"valign="top"align="left"><div id="instMods" class="Mactive"><td class="myBtnLeft"><img border="0" alt="" src="http://fierbinte.ucoz.ro/Forum/Diverse/Meniul_dual.gif"></td><td class="myBtnCenter"><div class="myBtnCont x-unselectable" align="center" style="background:url no-repeat padding-left:18px;margin-left:2px;font-size:12px;font-family:Arial,Tahoma;line-height:14px;" ><a id="instModsL" href="javascript://" onclick="showmods(0);return false;">Meniul sait-ului</a></div></td><td class="myBtnRight"><img alt="" border="0" src="http://fierbinte.ucoz.ro/Forum/Diverse/Meniul_dual.gif"></td>   

<td width="25%"valign="top"align="right"><div id="uninstMods" class="MnotActive"><td class="myBtnLeft"><img border="0" alt="" src="http://fierbinte.ucoz.ro/Forum/Diverse/Meniul_dual.gif"></td><td class="myBtnCenter"><div class="myBtnCont x-unselectable" align="center" style="background:url no-repeat padding-left:18px;margin-left:2px;font-size:12px;font-family:Arial,Tahoma;line-height:14px;" ><a id="instModsL" href="javascript://" onclick="showmods(1);return false;">Categoriile</a></div></td><td class="myBtnRight"><img alt="" border="0" src="http://fierbinte.ucoz.ro/Forum/Diverse/Meniul_dual.gif"></td>   
   </tr> </table> </td> </tr> </table>


Rezultatul:
 
OmulPaianjenData: Luni, 2012-08-20, 2:11 PM | Mesaj # 10
Neconectat
 Meniul, la atingere, se roteşte la 180 de grade.

Pasul 1: Panoul de Control - Design - Administrarea design-ului (CSS) - aici adăugăm stilul:

Code
* {
       margin: 0;
       padding: 0;
       border: none;
       }
#article {
       height: 300px;
       width: 330px;
       font-family: "TeXGyreReg",sans-serif;
       font-size: 17px;
       }
#article dl {
       position: relative;
       top: 15px;
       left: 50%;
       margin-left: -75px;
       width: 150px;
       height: 155px;
       color: #324040;
       text-align: center;
       background: #04b3d2;
       background: -moz-linear-gradient(top,#04b3d2,#48dfff);
       background: -webkit-gradient(linear,left top,left bottom,from(#04b3d2),to(#48dfff));
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       border-radius: 4px;
       -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
       -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
       box-shadow: 0px 0px 6px rgba(0,0,0,0.7);
       -webkit-transform-origin: 50% 120px;
       -moz-transform-origin: 50% 120px;
       -o-transform-origin: 50% 120px;
       -moz-transition: -moz-transform 0.7s ease-in-out;
       -o-transition: -o-transform 0.7s ease-in-out;
       -webkit-animation: bounceOut 0.7s ease-in-out;
       }
#article dt {
       position: absolute;
       bottom: 0px;
       width: 100%;
       height: 27px;
       padding-top: 5px;
       }
#article dd {
       -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
       -o-transform: rotate(180deg);
       }
#article dd a {
       display: block;
       height: 22px;
       padding: 3px 0px;
       color: #324040;
       text-decoration: none;
       }
#article dd a:hover {
       background: rgba(255,255,255,0.1);
       }
#article dl:hover {
       -webkit-transform: rotate(-180deg);
       -moz-transform: rotate(-180deg);
       -o-transform: rotate(-180deg);
       -moz-transition: -moz-transform 0.5s ease-in-out;
       -o-transition: -o-transform 0.5s ease-in-out;
       -webkit-animation: bounceIn 0.7s ease-in-out;
       }
@-webkit-keyframes bounceIn {
       from {-webkit-transform: rotate(0deg);}
       75%{-webkit-transform: rotate(-200deg);}
       90%{-webkit-transform: rotate(-175deg);}
       to {-webkit-transform: rotate(-180deg);}
       }
@-webkit-keyframes bounceOut {
       from {-webkit-transform: rotate(-360deg);}
       0% {-webkit-transform: rotate(-180deg);}
       10%{-webkit-transform: rotate(-160deg);}
       to {-webkit-transform: rotate(-360deg);}
       }
#article .masque {
       position: absolute;
       z-index: 50;
       width: 585px;
       height: 135px;
       top: 0;
       left: 0;
       background: #fff;
       }
#article .ombre {
       position: absolute;
       z-index: 40;
       width: 300px;
       height: 6px;
       top: 133px;
       margin-top: -103px;
       left: 142px;
       -webkit-box-shadow: 0px 100px 3px black;
       -moz-box-shadow: 0px 100px 3px black;
       box-shadow: 0px 100px 3px black;
       -webkit-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;
       -moz-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;
       border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;
       }


Pasul 2: Panoul de Control - Design - Administrarea design-ului (şabloane) - Secţiuni globale [Primul recipient] - în loc de codul $SMENU_1$ introduceţi:

Code
<section id="article">
        <dl class="menu">
        <dt class="btnRot">Meniul</dt>
            <dd><a href="/">...</a></dd>
            <dd><a href="/">Principală</a></dd>
            <dd><a href="/">Fişiere</a></dd>
            <dd><a href="/">Forum</a></dd>
        </dl>
        <div class="masque"></div>
        <div class="ombre"></div>
</section>


În mod normal, meniul va arăta ca în exemplul din prima imagine. La atingerea cu cursorul, meniul se va roti la 180 grade. + sigur că puteţi folosi scriptul nu numai pentru Meniul saitului.
* Pentru a schimba mărimea spaţiului în care se află meniul, editaţi în Stilul foii (CSS) următorul stil:
height: 300px;
width: 330px;

Rezultatul:
 
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Aspecte » Aspectul Meniului [Vertical]
Căutare:
Copyright © 2019. Toate drepturile rezervate
Politicieni | Acţiunea 2012 | Powered by uCoz