Un blog artistique au thème noir et blanc

Accueil » Zepo's Newsz

Un blog artistique au thème noir et blanc

Newz de ZePoze dans la ZepOrg232

Changement de look, le design de ce blog est à présent noir et blanc

Le menu de navigation se fait plus simple et discret, il se trouve à présent dans la petite zone horizontale située juste en dessous du titre principal. Les listes des pages catégories se déroulent sous le pointeur de la souri.

L’effet « drag and drop » appliqué sur le menu déroulant n’est pas encore finalisé. J’aimerais offrir la possibilité au visiteur ne n’avoir plus qu’un lien qui déroulerait tout le menu en un clic et qu’il puisse positionner le lien de menu où bon lui semble dans le site. Lorsque le visiteur scrollerait dans une page, le menu resterai en position fixed au premier plan et conserverait sa dernière position absolue après le chargement d’une nouvelle page. Ainsi, ce lien de menu resterait-il toujours à 10cm de la souri où que l’on soit dans la page, sans avoir à utiliser l’ascenseur vertical du navigateur pour remonter.

Pour le moment nous ne pouvons que déplacer le menu de plusieurs liens dans la page puis il reprend sa place initiale au chargement d’une nouvelle page et donc cela ne sert à rien.

Note : Le navigateur IE ne comprend pas toutes les instructions css de la même manière que le navigateur de Firefox. Pour ce navigateur étrange et obsolète qu’est Internet Explorer le menu déroulant ne fonctionne pas comme d’autres petits bugs ceci reste encore à fixer.

Important : Je n’ai pas encore déclaré de doctype adaptée dans mon document et ceci permet le fonctionnement de mes tricks mais ce manquement n’est pas recommandé. De facto mon blog n’est pas valide W3C. Je dois trouver une solution valide.

Ressources utilisées pour le design

Enfin ceux dont je retrouve la page web … oups

Ressources HTML CSS Java

J’aimerais présenter les sources de scripts et codes que j’ai utilisé.

La solution Drag and drop

Le code permettant de « déplacer une div » avec la souri autrement dit, le script java pour un drag and drop se trouve sur le forum Zonehd.net > Drag and Drop

Après de nombreux essais de divers scripts, il s’est avéré plus léger et plus propre que les autres et fonctionne avec les différents navigateurs tels que Firefox – Internet Explorer – Opéra et Safari.

Code java adapté


var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{

if (isdrag)
{
var X = tx – x;
var Y = ty – y;
//alert(X+’ ‘+Y);
dobj.style.left = nn6 ? e.clientX + X : event.clientX + X;
dobj.style.top = nn6 ? e.clientY + Y : event.clientY + Y;

return false;
}

}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? « HTML » : « BODY »;

while (fobj.tagName != topelement && fobj.className != « menu » )
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className== »menu » )
{
isdrag = true;

// objet à déplacer
dobj = fobj;
// espacement gauche de l’objet
tx = parseInt(dobj.style.left+0);
// espacement droit de l’objet
ty = parseInt(dobj.style.top+0);
// position x de la souris
x = nn6 ? e.clientX : event.clientX;
// position y de la souris
y = nn6 ? e.clientY : event.clientY;

document.onmousemove=movemouse;

return false;
}
}

document.onmousedown=selectmouse;
document.onmouseup=new Function(« isdrag=false » );

Code HTML adapté

<div class="menu" style="top:142px; left:146px;"></div>

Code CSS adapté


.menu {
text-align:center;
height:25px;
cursor:move;
position: absolute;
z-index:240;
}

La solution du menu déroulant

Quant à elle je l’ai trouvée sur le blog de Lyxia.org > WordPress Menu déroulant pages et catégories

Il a m’a fallu adapter complètement les css des listes et je n’utilise que les deux lignes écrites en php dans un premier temps.

Code HTML adapté


<ul id="nav">
<?php wp_list_pages('title_li='); ?>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>

Code CSS adapté


#nav, #nav ul {z-index:250;}

#nav a {
color: #000000;
display:block;
font-size:10px;
padding:4px;
text-align:left;
filter: alpha(opacity=35);
-moz-opacity: 0.35;
opacity: 0.35;
}

#nav li {float:left;}

#nav li:hover,#nav a:hover {
background-color:#F9F9F9;
filter: alpha(opacity=94);
-moz-opacity: 0.94;
opacity: 0.94;
}

#nav li ul {
left:-1000%;
position:absolute;
width:174px;
}

#nav li li {
background-color:#FFFFFF;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
width:145px;
}

#nav li:hover ul {
left:auto;
padding-left:0px;
}

lundi 12 mai 2008 à 07:08

- - - - - - - - - - - - - - - - - - - - - - - - - - - -