v1.0.3: reglages + adaptation mobiles

pull/1/head
louis.possoz@quelfutur.org 8 years ago
parent 81efd4310b
commit 5fca4b9b98

1
.gitattributes vendored

@ -1,6 +1,7 @@
* text=auto !eol
css/menu_anime.css -text
img/menu_anime-64.png -text
javascript/menu_anime.js -text
lang/paquet-menu_anime_en.php -text
lang/paquet-menu_anime_fr.php -text
/menu_anime_pipelines.php -text

@ -46,10 +46,12 @@
position: relative;
}
.menu_anime a {
.menu_anime li a {
float: left;
margin: 0;
padding: 6px 30px;
color: #ffffff;
color: #eeeeff;
background: none;
text-transform: uppercase;
font: bold 12px Arial, Helvetica, sans-serif;
text-decoration: none;
@ -84,7 +86,7 @@
transition: all .2s ease-in-out;
}
.menu_anime li:hover > ul {
.menu_anime li:hover > ul, .menu_anime li>a:focus + ul {
opacity: 1;
visibility: visible;
margin: 0;
@ -118,7 +120,10 @@
box-shadow: none;
}
.menu_anime ul a {
.menu_anime ul a {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding: 6px 10px;
width: 130px;
_height: 10px; /*IE6 only*/
@ -127,17 +132,14 @@
float: none;
text-transform: none;
}
.menu_anime .on > a {
background-color: #982d16;
background: -moz-linear-gradient(#db4221, #56180b);
background: -webkit-linear-gradient(#db4221, #56180b);
background: -o-linear-gradient(#db4221, #56180b);
background: -ms-linear-gradient(#db4221, #56180b);
background: linear-gradient(#db4221, #56180b);
.menu_anime a:focus, .menu_anime a:active, .menu_anime a:visited {
background: none !important;
color: #eeeeff;
}
.menu_anime > li > a:hover, .menu_anime ul a:hover {
color: #ffffff;
background-color: #b75d45;
background: -moz-linear-gradient(#ffa06f, #701b1b);
background: -webkit-linear-gradient(#ffa06f, #701b1b);
@ -156,12 +158,12 @@
}
.menu_anime ul li:first-child > a {
-moz-border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;
-moz-border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-top-right-radius: 6px;
-moz-border-top-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-moz-border-top-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
}
.menu_anime ul li:first-child > a:after {
@ -214,11 +216,10 @@
/* menu icon */
.menu_anime-trigger {
display: block; /* show menu icon */
height: 40px;
line-height: 40px;
height: 30px;
line-height: 30px;
cursor: pointer;
padding: 0 0 0 35px;
border: 1px solid #222222;
color: #ffffff;
font-weight: bold;
background-color: #6e0c0c;
@ -237,9 +238,9 @@
/* main nav */
.menu_anime {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
margin: 0; padding: 0;
position: relative;
top: 0;
width: 100%;
z-index: 1;
background-color: #6e0c0c;
@ -299,22 +300,23 @@
display: block;
float: none;
padding: 0;
color: #d8d8d8;
}
.menu_anime a:hover{
color: #ffffff;
}
background-color: #b75d45;
background: -moz-linear-gradient(#ffa06f, #701b1b);
background: -webkit-linear-gradient(#ffa06f, #701b1b);
background: -o-linear-gradient(#ffa06f, #701b1b);
background: -ms-linear-gradient(#ffa06f, #701b1b);
background: linear-gradient(#ffa06f, #701b1b);
}
.menu_anime ul a{
padding: 0;
width: auto;
}
.menu_anime ul a:hover{
background: none;
}
.menu_anime ul li:first-child a:after,
.menu_anime ul ul li:first-child a:after {
border: 0;

@ -0,0 +1,21 @@
/* function by Catalin Rosu for mobile display */
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');
}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');
})
}
/* Mobile */
$('.menu-conteneur').prepend('<div class="menu_anime-trigger">Menu</div>');
$(".menu_anime-trigger").on("click", function(){
$(".menu_anime").slideToggle();
});
// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('.menu_anime ul').addClass('no-transition');
});

@ -7,6 +7,7 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
// M
'menu_anime_description' => 'Controls the display of a menu with an elaborated style sheet: gradients, box and text shadows, rounded corners and box animation.
Included: automatic compact version for mobiles.
Nice complement to the {{Menus}} plugin for example.',
'menu_anime_nom' => 'Animated dropdown menu',

@ -7,6 +7,7 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
// M
'menu_anime_description' => 'Gère l\'affichage d\'un menu au moyen d\'une feuille de style élaborée: dégradés de couleurs, ombrage des menus et textes, coins arrondis et animation des menus.
Inclu: une version compacte automatique pour mobiles.
Complément du plugin {{Menus}} par exemple.',
'menu_anime_nom' => 'Menu animé déroulant',

@ -19,4 +19,11 @@ function menu_anime_insert_head_css($flux){
}
return $flux;
}
function menu_anime_insert_head($flux){
$flux .= '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>';
$flux .= '<script type="text/javascript" src="'.find_in_path('javascript/menu_anime.js').'"></script>';
return $flux;
}
?>

@ -1,19 +1,20 @@
<paquet
prefix="menu_anime"
categorie="navigation"
version="1.0.2"
version="1.0.3"
etat="dev"
compatibilite="[3.0.20;3.0.*]"
compatibilite="[3.0.0;3.1.*]"
logo="img/menu_anime-64.png"
documentation="http://contrib.spip.net/Menu-anime-deroulant"
documentation="http://contrib.spip.net/Menu-anime"
>
<nom>Menu animé</nom>
<auteur mail="louis.possoz@quelfutur.org">Louis Possoz</auteur>
<auteur lien="http://www.quelfutur.org/archive/louis_possoz.html">Louis Possoz</auteur>
<credit lien="http://red-team-design.com/css3-dropdown-menu/">Catalin Rosu - Red Team Design</credit>
<copyright>2011-2015</copyright>
<licence lien="http://www.gnu.org/licenses/gpl-3.0.html">GNU/GPL</licence>
<pipeline nom="insert_head_css" inclure="menu_anime_pipelines.php" />
<pipeline nom="insert_head" inclure="menu_anime_pipelines.php" />
</paquet>
</paquet>

Loading…
Cancel
Save