Difference between revisions of "Template:Colegio EmelinaU"

Line 114: Line 114:
 
/*MENU STYLING */
 
/*MENU STYLING */
  
−
            #menu {
+
.menu {
−
margin:auto;
+
    position:relative;
−
width:100%;
+
    background:#fff url(../images/background.jpg);
−
font-family:Arial, Helvetica, sans-serif;
+
    width:520px;
−
}
+
    height:382px;
−
+
    border:1px #000 solid;
−
ul, ol {
+
    margin:20px auto;
−
list-style:none;
+
    padding:15px;
−
}
+
    border-radius:3px;
−
+
    -moz-border-radius:3px;
−
.nav > li {
+
    -webkit-border-radius:3px;
−
float:left;
+
}
−
}
+
 
−
+
/* main menu styles */
−
.nav li a {
+
 
−
background-color:#000;
+
.nav,.nav ul {
−
color:#fff;
+
    list-style:none;
−
text-decoration:none;
+
    margin:0;
−
padding:10px 12px;
+
    padding:0;
−
display:block;
+
}
−
}
+
 
−
+
.nav {
−
.nav li a:hover {
+
    position:relative;
−
background-color:#434343;
+
}
−
}
+
 
−
+
.nav ul {
−
.nav li ul {
+
    height:0;
−
display:none;
+
    left:0;
−
position:absolute;
+
    overflow:hidden;
−
min-width:140px;
+
    position:absolute;
−
}
+
    top:46px;
−
+
}
−
.nav li:hover > ul {
+
 
−
display:block;
+
.nav li {
−
}
+
    float:left;
−
+
    position:relative;
−
.nav li ul li {
+
}
−
position:relative;
+
 
−
}
+
.nav li a {
−
+
    -moz-transition:0.5s;
−
.nav li ul li ul {
+
    -o-transition:0.5s;
−
right:-140px;
+
    -webkit-transition:0.5s;
−
top:0px;
+
    background-color:#7770B4;
−
}
+
    border:1px solid #6E67A6;
 +
    color:#FFF;
 +
    display:block;
 +
    font-size:16px;
 +
    line-height:35px;
 +
    padding:5px 20px;
 +
    text-decoration:none;
 +
    transition:0.5s;
 +
}
 +
 
 +
.nav li:hover > a {
 +
    background:#8CCA33;
 +
    border-color:#6E67A6;
 +
    color:#fff;
 +
}
 +
 
 +
.nav li:hover ul.subs {
 +
    height:auto;
 +
    width:180px;
 +
}
 +
 
 +
.nav ul li {
 +
    -moz-transition:0.5s;
 +
    -o-transition:0.5s;
 +
    -webkit-transition:0.5s;
 +
    opacity:0;
 +
    transition:0.5s;
 +
    width:100%;
 +
}
 +
 
 +
.nav li ul li {
 +
    -moz-transition-delay:0s;
 +
    -o-transition-delay:0s;
 +
    -webkit-transition-delay:0s;
 +
    transition-delay:0s;
 +
}
 +
 
 +
.nav li:hover ul li {
 +
    opacity:1;
 +
    -moz-transition-delay:0.5s;
 +
    -o-transition-delay:0.5s;
 +
    -webkit-transition-delay:0.5s;
 +
    transition-delay:0.5s;
 +
}
 +
 
 +
.nav ul li a {
 +
    background:#7770B4;
 +
    border-color:#6E67A6;
 +
    color:#fff;
 +
    line-height:1px;
 +
    -moz-transition:1.5s;
 +
    -o-transition:1.5s;
 +
    -webkit-transition:1.5s;
 +
    transition:1.5s;
 +
}
 +
 
 +
.nav li:hover ul li a {
 +
    line-height:35px;
 +
}
 +
 
 +
.nav ul li a:hover {
 +
    background:#8CCA33;
 +
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
 +
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
 +
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));
 +
}        
 +
 
 +
 
 +
 
 +
 
  
 
/*CLASSES */
 
/*CLASSES */
Line 201: Line 270:
 
 
  
−
<div id="menu">
+
<div class="menu">
−
<ul class="nav">
+
    <ul class="nav">
−
<li><a href="">Inicio</a></li>
+
        <li><a href="https://www.script-tutorials.com/">Home</a></li>
−
<li><a href="">Servicios</a>
+
        <li><a href="https://www.script-tutorials.com/">Tutorials</a>
−
<ul>
+
            <ul class="subs">
−
<li><a href="">Submenu1</a></li>
+
                <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
−
<li><a href="">Submenu2</a></li>
+
                <li><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li>
−
<li><a href="">Submenu3</a></li>
+
                <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
−
<li><a href="">Submenu4</a>
+
                <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
−
<ul>
+
                <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
−
<li><a href="">Submenu1</a></li>
+
                <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
−
<li><a href="">Submenu2</a></li>
+
                <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
−
<li><a href="">Submenu3</a></li>
+
            </ul>
−
<li><a href="">Submenu4</a></li>
+
        </li>
−
</ul>
+
        <li><a href="https://www.script-tutorials.com/category/resources/">Resources</a>
−
</li>
+
            <ul class="subs">
−
</ul>
+
                <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
−
</li>
+
                <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
−
<li><a href="">Acerca de</a>
+
                <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
−
<ul>
+
                <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
−
<li><a href="">Submenu1</a></li>
+
                <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
−
<li><a href="">Submenu2</a></li>
+
            </ul>
−
<li><a href="">Submenu3</a></li>
+
        </li>
−
<li><a href="">Submenu4</a></li>
+
        <li><a href="https://www.script-tutorials.com/about/">About</a></li>
−
</ul>
+
        <li><a href="https://www.script-tutorials.com/creating-css3-dropdown-menu-4/">Back</a></li>
−
</li>
+
    </ul>
−
<li><a href="">Contacto</a></li>
+
    <div style="clear:both"></div>
−
</ul>
+
</div>
−
</div>
+
−
 
+
−
 
+
−
 
+
  
  

Revision as of 03:30, 1 September 2015