Difference between revisions of "Template:Colegio EmelinaU"

Line 114: Line 114:
 
/*MENU STYLING */
 
/*MENU STYLING */
  
−
.menu {
+
ul#menu-horizontal li {
−
    position:relative;
+
float: left;
−
    background:#fff url(../images/background.jpg);
+
display: inline;
−
    width:520px;
+
position: relative;}
−
    height:382px;
+
−
    border:1px #000 solid;
+
−
    margin:20px auto;
+
−
    padding:15px;
+
−
    border-radius:3px;
+
−
    -moz-border-radius:3px;
+
−
    -webkit-border-radius:3px;
+
−
}
+
  
−
/* main menu styles */
 
  
−
.nav,.nav ul {
+
ul#menu-horizontal ul {
−
    list-style:none;
+
display: none;
−
    margin:0;
+
position: relative;
−
    padding:0;
+
top: 24;
 +
left:0;
 +
margin:0;
 +
padding:0;
 +
background:#FFFFFF;
 
}
 
}
  
−
.nav {
+
ul#menu-horizontal ul li {
−
    position:relative;
+
display: block !important;
 
}
 
}
  
−
.nav ul {
+
ul#menu-horizontal li:hover ul{
−
    height:0;
+
display: none;
−
    left:0;
+
−
    overflow:hidden;
+
−
    position:absolute;
+
−
    top:46px;
+
 
}
 
}
  
−
.nav li {
+
ul#menu-horizontal li:hover ul{
−
    float:left;
+
display: block;
−
    position:relative;
+
 
}
 
}
  
−
.nav li a {
 
−
    -moz-transition:0.5s;
 
−
    -o-transition:0.5s;
 
−
    -webkit-transition:0.5s;
 
−
    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 {
+
#menu-horizontal {
−
    height:auto;
+
width:500px;
−
    width:180px;
+
margin:0 auto;
 
}
 
}
  
−
.nav ul li {
+
#menu-horizontal li {
−
    -moz-transition:0.5s;
+
margin:0 1px;
−
    -o-transition:0.5s;
+
width:98px;
−
    -webkit-transition:0.5s;
+
min-height:19px;
−
    opacity:0;
+
text-align:center;
−
    transition:0.5s;
+
background:#BBB;
−
    width:100%;
+
list-style:none;
 +
padding:2px 0;
 
}
 
}
  
−
.nav li ul li {
+
/* y otro poquito por aquí.. */
−
    -moz-transition-delay:0s;
+
−
    -o-transition-delay:0s;
+
−
    -webkit-transition-delay:0s;
+
−
    transition-delay:0s;
+
−
}
+
  
−
.nav li:hover ul li {
+
#menu-horizontal li:hover {
−
    opacity:1;
+
background:#C5014F;
−
    -moz-transition-delay:0.5s;
+
−
    -o-transition-delay:0.5s;
+
−
    -webkit-transition-delay:0.5s;
+
−
    transition-delay:0.5s;
+
 
}
 
}
  
−
.nav ul li a {
+
#menu-horizontal li a {
−
    background:#7770B4;
+
font:bold 11px Arial, Helvetica, sans-serif;
−
    border-color:#6E67A6;
+
color:#FFF;
−
    color:#fff;
+
text-decoration:none;
−
    line-height:1px;
+
−
    -moz-transition:1.5s;
+
−
    -o-transition:1.5s;
+
−
    -webkit-transition:1.5s;
+
−
    transition:1.5s;
+
 
}
 
}
  
−
.nav li:hover ul li a {
+
#menu-horizontal li ul li{
−
    line-height:35px;
+
float:none;
 +
width:98px;
 +
margin:1px 0;
 
}
 
}
−
 
−
.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));
 
−
}        
 
−
 
−
 
  
  
Line 270: Line 221:
 
 
  
−
<div class="menu">
+
<ul id="menu-horizontal">
−
    <ul class="nav">
+
<li><a href="#" title="Texto">Texto</a></li>
−
        <li><a href="https://www.script-tutorials.com/">Home</a></li>
+
<li><a href="#" title="Texto">Texto</a></li>
−
        <li><a href="https://www.script-tutorials.com/">Tutorials</a>
+
<li><a href="#" title="Texto">Texto</a>
−
            <ul class="subs">
+
<ul>
−
                <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
+
<li><a href="#" title="Texto">Texto</a></li>
−
                <li><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li>
+
<li><a href="#" title="Texto">Texto</a></li>
−
                <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
+
</ul>
−
                <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
+
</li>
−
                <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
+
<li><a href="#" title="Texto">Texto</a></li>
−
                <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
+
<li><a href="#" title="Texto">Texto</a></li>
−
                <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
+
</ul>
−
            </ul>
+
−
        </li>
+
−
        <li><a href="https://www.script-tutorials.com/category/resources/">Resources</a>
+
−
            <ul class="subs">
+
−
                <li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
+
−
                <li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
+
−
                <li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
+
−
                <li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
+
−
                <li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
+
−
            </ul>
+
−
        </li>
+
−
        <li><a href="https://www.script-tutorials.com/about/">About</a></li>
+
−
        <li><a href="https://www.script-tutorials.com/creating-css3-dropdown-menu-4/">Back</a></li>
+
−
    </ul>
+
−
    <div style="clear:both"></div>
+
−
</div>
+
−
 
+
  
 
<!-- End of menu  -->
 
<!-- End of menu  -->

Revision as of 03:42, 1 September 2015