focus sur menu

Emilie012 · 26/11/2010, 14h33

Bonjour tous,

J'aimerai utiliser ce menu http://apycom.com/menus/1-black.html
Mais je ne comprends pas comment je peux garder le focus sur le menu sélectionné sachant qu'il faut rafraîchir toute la page ????

Voici un exemple de menu livré, mais si je mets dans le href un lien vers mon index qui rafraichie tout, alors ben, je perds le focus du menu ... comment faire (autre que du javascript pour rafraichir qu'une partie de la page sans rafraichir le menu) ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Style 01 (Black) - Menu by Apycom.com</title>
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>

<style type="text/css">
* { margin:0;
    padding:0;
}
body { background:rgb(74,81,85); }
div#menu { margin:5px auto; }
div#copyright {
    font:11px 'Trebuchet MS';
    color:#222;
    text-indent:30px;
    padding:40px 0 0 0;
}
div#copyright a { color:#000; }
div#copyright a:hover { color:#222; }
</style>

<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>Home</span></a>
            <ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul>
        </li>
        <li><a href="toto.html" class="parent"><span>Product Info</span></a>
            <ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul>
        </li>
        <li><a href="#"><span>Help</span></a></li>
        <li class="last"><a href="#"><span>Contacts</span></a></li>
    </ul>
</div>

<div id="copyright">Copyright &copy; 2010 <a href="http://apycom.com/">Apycom jQuery Menus</a></div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

en fait, sur leur page, ils ont un autre menu qui garde très bien la position du menu, j'ai regardé le code source ... mais j'ai pô compris

Snooky68 · 28/11/2010, 00h09

En effet il ne faut pas recharger juste une partie de la page, il faut recharger toute la page en passant en paramètre la position du menu actuel, et ensuite tu charge ton menus comme tu le souhaite avec ta position!

ShaunY · 28/11/2010, 04h54

Tu n'a que deux option dans ce cas.
La premiere et du moin la plus simple a realiser est d'utiliser un frame.
La seconde est de refaire le tout en php, mais tu ne semble pas rendu a ce niveau (moi non plus d'ailleur).
C'est les deux seul option que je connais pour l'instant.
Tu peu toujours tenter ta chance avec le PHP tu n'auras pas besoin d'une base de donnée pour cela donc tu a déjà la tâche plus facile.
Bonne chance.

Emilie012 · 29/11/2010, 15h01

Citation:

il faut recharger toute la page en passant en paramètre la position du menu actuel, et ensuite tu charge ton menus comme tu le souhaite avec ta position!

mais c'est ça que je veux Snooky68 tu as raison ... mais comment fait-on avec ce type de menu ?

Snooky68 · 29/11/2010, 22h52

Citation:

Envoyé par Emilie012

mais c'est ça que je veux Snooky68 tu as raison ... mais comment fait-on avec ce type de menu ?

heu.... juste une piste alors... tu transmet une variable pour identifier le menu sur lequel tu a cliqué.. comment? Ben dans ton menu ta des lien (balise "a") et dans le href tu doit mettre l'adresse de la page que tu veut pointer! Ben à la fin de ton adresse tu ajoute un truc du genre "tonadresse.com\page\?menuactif=4" se qui veut dire que c'est le menu n°4 qui à été cliqué! (cherche un peut sous "methode POST GET" sous google, c'est bien documenté) ensuite tu récupère ta variable "menuactif" et tu applique un style css dessus pour gardé actif ton menu....
Le tout en php...

Je dit pas que c'est facile... mais faut chercher un peut

!

Emilie012 · 30/11/2010, 13h22

merci Snooky68

Je comprends parfaitement le principe du "menuactif" ... et je connais aussi très bien les POST et GET. Cela dit, lorsque je regarde le code source de la page d'accueil que je vous ai donnée, il ne semble pas du tout utiliser le principe que tu m'indiques.
Voici un petit exemple de leur code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
        <div id="bmenu">
            <ul class="menu">
                        <li><a href="http://apycom.com/"><span>Home</span></a></li><li class="current"><a href="javascript://"><span>Menus</span></a><div><ul>            <li><a href="http://apycom.com/menus/1-dim-gray.html"><span>Style 01 <small style="color:#696969">(Dim Gray)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/2-steel-blue.html"><span>Style 02 <small style="color:#4682b4">(Steel Blue)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/3-deep-sky-blue.html"><span>Style 03 <small style="color:#00bfff">(Deep Sky Blue)</small></span></a></li>

                        <li><a href="http://apycom.com/menus/4-steel-blue.html"><span>Style 04 <small style="color:#4682b4">(Steel Blue)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/5-black.html"><span>Style 05 <small style="color:#555">(Black)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/6-light-sea-green.html"><span>Style 06 <small style="color:#20b2aa">(Light Sea Green)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/7-lime.html"><span>Style 07 <small style="color:#00ff00">(Lime)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/8-white-smoke.html"><span>Style 08 <small style="color:#f5f5f5">(White Smoke)</small></span></a></li>

                        <li><a href="http://apycom.com/menus/9-green-yellow.html"><span>Style 09 <small style="color:#adff2f">(Green Yellow)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/10-orange.html"><span>Style 10 <small style="color:#ffa500">(Orange)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/11-black.html"><span>Style 11 <small style="color:#555">(Black)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/12-steel-blue.html"><span>Style 12 <small style="color:#4682b4">(Steel Blue)</small></span></a></li>
                        <li><a href="http://apycom.com/menus/13-deep-pink.html"><span>Style 13 <small style="color:#ff1493">(Deep Pink)</small></span></a></li>

                        <li><a href="http://apycom.com/menus/14-fire-brick.html"><span>Style 14 <small style="color:#b22222">(Fire Brick)</small></span></a></li>
                                </ul></div></li>
                        <li><a href="http://apycom.com/help.html"><span>Help</span></a></li>            <li class="last"><a href="http://apycom.com/contacts.html"><span>Contacts</span></a></li>                
            </ul>
        </div>

A aucun moment il utilise de variable pour appeler un css différent ... ou alors j'ai pô du tout pigé !!! ce qui est possible

En plus, et la je ne suis pas certaine de ce que je vais dire, mais ça veut dire que je dois prévoir un css à chaque fois que je vais faire une clique sur le menu ?

Bref ... je ne suis pas tellement plus avancée moi

alors je ne n'ai pas tout compris et si vous aviez un exemple fonctionnel ... je serai preneuse.

Dernière chose, vous voyez le liseret lumineux ? il se déplace et il faut bien lui redonner la bonne position en fonction du menu cliqué ? bon, je sais, avec le css y'a le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div#menu li.back {
    background: url(images/lava.png) no-repeat right -44px !important;
    background-image: url(images/lava.gif);
    width: 13px;
    height: 44px;
    z-index: 8;
    position: absolute;
    margin: -1px 0 0 -5px;
}
div#menu li.back .left {
    background: url(images/lava.png) no-repeat top left !important;
    background-image: url(images/lava.gif);
    height: 44px;
    margin-right: 8px;
}

mais je ne vais pas m'amuser à calculer la position à chaque fois qu'on fait un clique ?????

C'est pas clair du tout la

oulala ch'uis désol !!!

28/11/2010, 00h09	#2
Snooky68 Membre actif Nicolas TSCHAENN Développeur Web/Python/PHP Inscription : mai 2006 Messages : 244 Détails du profil Informations personnelles : Nom : Nicolas TSCHAENN Âge : 25 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Développeur Web/Python/PHP Secteur : Communication - Médias Informations forums : Inscription : mai 2006 Messages : 244 Points : 163 Points : 163	En effet il ne faut pas recharger juste une partie de la page, il faut recharger toute la page en passant en paramètre la position du menu actuel, et ensuite tu charge ton menus comme tu le souhaite avec ta position! __________________ About.me /********************* Aucune responsabilité n'est engagée sur la lisibilité du message ou les éventuels dommages qu'il peut engendrer. Les fautes d'orthographes sus-citées sont déposées auprès de leurs propriétaires respectifs et soumis au copyright. Toutes copies sera sévèrement désapprouvé. **********************/
	00

28/11/2010, 04h54	#3
ShaunY Nouveau Membre du Club Inscription : novembre 2010 Messages : 30 Détails du profil Informations personnelles : Localisation : Canada Informations forums : Inscription : novembre 2010 Messages : 30 Points : 30 Points : 30	Tu n'a que deux option dans ce cas. La premiere et du moin la plus simple a realiser est d'utiliser un frame. La seconde est de refaire le tout en php, mais tu ne semble pas rendu a ce niveau (moi non plus d'ailleur). C'est les deux seul option que je connais pour l'instant. Tu peu toujours tenter ta chance avec le PHP tu n'auras pas besoin d'une base de donnée pour cela donc tu a déjà la tâche plus facile. Bonne chance.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email