Template:Http://2014.igem.org/Team:ULB-Brussels/Template

From 2014.igem.org

(Difference between revisions)
(Undo revision 28714 by Quinthos (talk))
Line 3: Line 3:
<head>
<head>
<!--init and scripts -->
<!--init and scripts -->
-
     <script>
+
<style type="text/css">
 +
        #monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
 +
        #monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
 +
        #monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
 +
        #monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
 +
        #monmenu li a {text-decoration:none;}
 +
        #monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
 +
        #monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
 +
      </style>
 +
      <!--[if lt IE 7]>
 +
        <script type="text/javascript">
 +
            // Fonction destinée à remplacer le "LI:hover" pour IE 6
 +
            sfHover = function() {
 +
                var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
 +
                for (var i=0; i<sfEls.length; i++) {
 +
                    sfEls[i].onmouseover = function() {
 +
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
 +
                        this.className += " sfhover";
 +
                    }
 +
                    sfEls[i].onmouseout = function() {
 +
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
 +
                    }
 +
                }
 +
            }
 +
            if (window.attachEvent) window.attachEvent("onload", sfHover);
 +
        </script>
 +
        <style type="text/css">
 +
            #monmenu li {width: 144px;}
 +
        </style>
 +
    <![endif]-->
 +
    <meta name="keywords"
 +
content="CSS, cascading style sheets, mise en page, design, site, web, techniques, sites, webmaster, page">
 +
    <meta name="description"
 +
content="Voici un exemple de code de menu hiérarchique déroulant réalisé à l'aide de CSS.">
 +
    <title>Exemple de menu hiérarchique en CSS</title>
 +
     <script type="text/javascript" src="https://static.igem.org/mediawiki/2014/7/7f/Slider.jpg"></script>
 +
        <script>
         jssor_slider1_starter = function (containerId) {
         jssor_slider1_starter = function (containerId) {
-
 
             var options = {
             var options = {
-
                 $AutoPlay: false,
+
                 $DragOrientation: 3,
-
                 $SlideDuration: 800,
+
                 $ArrowNavigatorOptions: {
-
                $BulletNavigatorOptions: {
+
                     $Class: $JssorArrowNavigator$,
-
                     $Class: $JssorBulletNavigator$,
+
                     $ChanceToShow: 2,
                     $ChanceToShow: 2,
-
                     $AutoCenter: 1,
+
                     $AutoCenter: 0,
-
                     $Steps: 1,
+
                     $Steps: 1
-
                    $Lanes: 1,
+
-
                    $SpacingX: 10,
+
-
                    $SpacingY: 10,
+
-
                    $Orientation: 1
+
                 }
                 }
             };
             };
             var jssor_slider1 = new $JssorSlider$(containerId, options);
             var jssor_slider1 = new $JssorSlider$(containerId, options);
-
         }
+
         };
     </script>
     </script>
<style type="text/css">
<style type="text/css">
-
#menu-demo2, #menu-demo2 ul{
 
-
width=100%;
 
-
padding:0px;
 
-
margin:3px;
 
-
list-style:none;
 
-
text-align:center;
 
-
}
 
-
#menu-demo2 li{
 
-
display:inline-block;
 
-
position:relative
 
-
border-radius:0;
 
-
}
 
-
#menu-demo2 ul li{
 
-
display:inherit;
 
-
border-radius:0;
 
-
}
 
-
#menu-demo2 ul li:hover{
 
-
border-radius:0;
 
-
}
 
-
#menu-demo2 ul li:last-child{
 
-
border-radius:0 0 0px 0px;
 
-
}
 
-
#menu-demo2 ul{
 
-
position:absolute;
 
-
max-height:0px;
 
-
width:100%;
 
-
overflow:hidden;
 
-
-moz-transition: .8s all .3s;
 
-
-webkit-transition: .8s all .3s;
 
-
transition: .8s all .3s;
 
-
}
 
-
#menu-demo2 li:hover ul{
 
-
max-height:150px;
 
-
}
 
-
/* background des liens menus */
 
-
#menu-demo2 li:first-child{margin: 20px 0px 1px 0px;
 
-
background-color: #8b8b8b;
 
-
background-image:-webkit-linear-gradient(top, #a9a9a9, #7a7a7a);
 
-
background-image:linear-gradient(to bottom, #a9a9a9, #7a7a7a);
 
-
}
 
-
#menu-demo2 li:nth-child(2){
 
-
background-color: #8b8b8b;
 
-
background-image: -webkit-linear-gradient(top, #a9a9a9, #7a7a7a);
 
-
background-image:linear-gradient(to bottom, #a9a9a9, #7a7a7a);
 
-
}
 
-
#menu-demo2 li:nth-child(3){
 
-
background-color: #8b8b8b;
 
-
background-image:-webkit-linear-gradient(top, #a9a9a9,  #7a7a7a);
 
-
background-image:linear-gradient(to bottom, #a9a9a9,  #7a7a7a);
 
-
}
 
-
#menu-demo2 li:last-child{
 
-
background-color: #8b8b8b;
 
-
background-image:-webkit-linear-gradient(top, #a9a9a9, #8b8b8b);
 
-
background-image:linear-gradient(to bottom, #a9a9a9,  #7a7a7a);
 
-
}
 
-
/* background des liens sous menus */
 
-
#menu-demo2 li:first-child li{
 
-
background:#B0C4DE;
 
-
}
 
-
#menu-demo2 li:nth-child(2) li{
 
-
background:#B0C4DE;
 
-
}
 
-
#menu-demo2 li:nth-child(3) li{
 
-
background:#B0C4DE;
 
-
}
 
-
#menu-demo2 li:last-child li{
 
-
background:#B0C4DE;
 
-
}
 
-
/* background des liens menus et sous menus au survol */
 
-
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
 
-
background:#B0C4DE;
 
-
}
 
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo,.printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo,.printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
Line 325: Line 283:
         <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1106px; height: 300px;
         <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1106px; height: 300px;
             overflow: hidden;">
             overflow: hidden;">
 +
            <div><img u="image" src="https://static.igem.org/mediawiki/2014/8/82/ULB2014PLACEHOLDER2.png" /></div>
             <div><img u="image" src="https://static.igem.org/mediawiki/2014/8/87/ULB2014PLACEHOLDER1.png" /></div>
             <div><img u="image" src="https://static.igem.org/mediawiki/2014/8/87/ULB2014PLACEHOLDER1.png" /></div>
-
            <div><img u="image" src="https://static.igem.org/mediawiki/2014/8/82/ULB2014PLACEHOLDER2.png" /></div>
 
         </div>
         </div>
-
 
+
         <!-- Arrow Navigator Skin Begin -->
-
         <!-- Bullet Navigator Skin Begin -->
+
         <style>
         <style>
-
             /* jssor slider bullet navigator skin 05 css */
+
             /* jssor slider arrow navigator skin 03 css */
             /*
             /*
-
             .jssorb05 div          (normal)
+
             .jssora03l              (normal)
-
             .jssorb05 div:hover    (normal mouseover)
+
             .jssora03r              (normal)
-
             .jssorb05 .av          (active)
+
             .jssora03l:hover        (normal mouseover)
-
             .jssorb05 .av:hover     (active mouseover)
+
             .jssora03r:hover       (normal mouseover)
-
             .jssorb05 .dn          (mousedown)
+
             .jssora03ldn            (mousedown)
 +
            .jssora03rdn            (mousedown)
             */
             */
-
             .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av
+
             .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
             {
             {
-
                 background: url(https://static.igem.org/mediawiki/2014/c/c2/ULB2014BULLETS2.png) no-repeat;
+
            position: absolute;
 +
            cursor: pointer;
 +
            display: block;
 +
                 background: url(https://static.igem.org/mediawiki/2014/d/d3/ULB2014ARROWS.png) no-repeat;
                 overflow:hidden;
                 overflow:hidden;
-
                cursor: pointer;
 
             }
             }
-
             .jssorb05 div { background-position: -7px -7px; }
+
             .jssora03l { background-position: -3px -33px; }
-
             .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
+
             .jssora03r { background-position: -63px -33px; }
-
             .jssorb05 .av { background-position: -67px -7px; }
+
            .jssora03l:hover { background-position: -123px -33px; }
-
             .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
+
             .jssora03r:hover { background-position: -183px -33px; }
 +
             .jssora03ldn { background-position: -243px -33px; }
 +
            .jssora03rdn { background-position: -303px -33px; }
         </style>
         </style>
-
         <!-- bullet navigator container -->
+
         <!-- Arrow Left -->
-
         <div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">
+
         <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
-
            <!-- bullet navigator item prototype -->
+
        </span>
-
            <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
+
        <!-- Arrow Right -->
-
         </div>
+
        <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
-
         <!-- Bullet Navigator Skin End -->
+
         </span>
-
 
+
         <!-- Arrow Navigator Skin End -->
-
         <a style="display: none" href="http://www.jssor.com">carousel slider</a>  
+
         <a style="display: none" href="http://www.jssor.com">carousel slider</a>
-
         <!-- Trigger -->  
+
         <!-- Trigger -->
         <script>
         <script>
             jssor_slider1_starter('slider1_container');
             jssor_slider1_starter('slider1_container');
-
         </script>  
+
         </script>
-
     </div>  
+
     </div>
-
     <!-- Jssor Slider End -->  
+
     <!-- Jssor Slider End -->
<!--navigation menu -->
<!--navigation menu -->
  <td align="center" colspan="3">
  <td align="center" colspan="3">
Line 381: Line 343:
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
<a href="https://2014.igem.org/Team:ULB-Brussels"style="color:#000000">Home </a> </td>
<a href="https://2014.igem.org/Team:ULB-Brussels"style="color:#000000">Home </a> </td>
-
 
-
 
<td style= "
<td style= "
Line 396: Line 356:
<td style= "
<td style= "
-
     background :#8b8b8b;
+
     background :#8b8b8b
-
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a');
+
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
Line 403: Line 363:
     position: relative;
     position: relative;
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
-
<a href="https://2014.igem.org/Team:ULB-Brussels"style="color:#000000">Sponsors </a> </td>
+
<a href="https://igem.org/Team.cgi?year=2014&team_name=ULB-Brussels"style="color:#000000"> Official Team Profile </a></td>
-
<td colspan="3" style= "
+
<td style= "
-
     background :#8b8b8b;
+
     background :#8b8b8b
-
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a');
+
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
Line 414: Line 374:
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
-
<a href="https://2014.igem.org/Team:ULB-Brussels/Project"style="color:#000000"> <div id="monmenu">
+
<a href="https://2014.igem.org/Team:ULB-Brussels/Project"style="color:#000000"> Project</a></td>
-
        <ul height="100%" id="menu-demo2">
+
 
-
<li style= "
+
<td style= "
     background :#8b8b8b
     background :#8b8b8b
-
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(152,152,152)', endColorstr='rgb(141,141,141)')
+
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
-
     background : -webkit-gradient(linear, left top, left bottom, rgb(152,152,152)to(rgb(141,141,141)));
+
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
-
     background : -moz-linear-gradient(top, rgb(152,152,152), rgb(141,141,141));" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b ><a href="#" style="color:#000000">Project <img src="https://static.igem.org/mediawiki/2014/4/47/Bouton.PNG" ></a>
+
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
-
<ul >
+
    border-top: 2px solid #939393;
-
<li><a href="https://2014.igem.org/Team:ULB-Brussels/Project"style="color:#000000">Introduction</a></li>
+
    position: relative;
-
<li><a href="#">Dayly News</a></li>
+
    margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >
-
<li><a href="https://2014.igem.org/Team:ULB-Brussels/Modeling"style="color:#000000">Modeling</a></li>
+
-
<li><a href="https://2014.igem.org/Team:ULB-Brussels/Parts"style="color:#000000">Parts</a></li>
+
-
<li><a href="https://2014.igem.org/Team:ULB-Brussels/Safety"style="color:#000000">Safety</a></li>
+
-
</ul></td>
+
-
<td style= "border-radius: 0px 15px 15px 0px; behavior: url(border-radius.htc);
+
<a href="https://2014.igem.org/Team:ULB-Brussels/Parts"style="color:#000000"> Parts</a></td>
-
     background :#8b8b8b;
+
 
-
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a');
+
<td style= "
 +
     background :#8b8b8b
 +
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
Line 437: Line 395:
     position: relative;
     position: relative;
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=ULB-Brussels"style="color:#000000"> Official Team Profile </a></td>
 
-
           
 
 +
<a href="https://2014.igem.org/Team:ULB-Brussels/Modeling"style="color:#000000"> Modeling</a></td>
 +
<td style= "
 +
    background :#8b8b8b
 +
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
 +
    background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
 +
    background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
 +
    border-top: 2px solid #939393;
 +
    position: relative;
 +
    margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b > 
 +
<td style= "
 +
    background :#8b8b8b
 +
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
 +
    background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
 +
    background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
 +
    border-top: 2px solid #939393;
 +
    position: relative;
 +
    margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b > 
 +
<a href="https://2014.igem.org/Team:ULB-Brussels/Safety"style=" color:#000000"> Safety </a></td>
 +
<td style= "border-radius: 0px 15px 15px 0px; behavior: url(border-radius.htc);
 +
    background :#8b8b8b
 +
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
 +
    background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
 +
    background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
 +
    border-top: 2px solid #939393;
 +
    position: relative;
 +
    margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b > 
 +
<a href="https://2014.igem.org/Team:ULB-Brussels/Attributions"style="color:#000000"> Attributions </a></td>
<td style= " border-radius: 15px 0px 0px 15px; behavior: url(border-radius.htc); position: relative;
<td style= " border-radius: 15px 0px 0px 15px; behavior: url(border-radius.htc); position: relative;

Revision as of 22:16, 8 July 2014

Exemple de menu hiérarchique en CSS

carousel slider
Home Team Official Team Profile Project Parts Modeling Safety Attributions Français Dutch

Retrieved from "http://2014.igem.org/Template:Http://2014.igem.org/Team:ULB-Brussels/Template"