1 |
rda |
1096 |
# mognase - mageia.org global navigation service |
2 |
|
|
|
3 |
|
|
This service is available so that each mageia.org Web service/site can have |
4 |
|
|
a same, consistent looking, synchronized navigation bar. |
5 |
|
|
|
6 |
|
|
You have two ways to use this service: |
7 |
|
|
|
8 |
|
|
* using a Javascript snippet; |
9 |
|
|
* using directly CSS and HTML and placing them at the right place. |
10 |
|
|
|
11 |
|
|
|
12 |
|
|
## Use a Javascript snippet (preferred, less work) |
13 |
|
|
|
14 |
|
|
Place this at the end of your HTML document: |
15 |
|
|
|
16 |
|
|
> ```<script src="//nav.mageia.org/js/"></script> |
17 |
|
|
> ``` |
18 |
|
|
|
19 |
|
|
It will: |
20 |
|
|
|
21 |
|
|
* load the stylesheet rules |
22 |
|
|
* detect some of your document features; |
23 |
|
|
* build a ```<div id="nav" />``` node just after the ```<body>``` of your doc; |
24 |
|
|
* call and inject the HTML. |
25 |
|
|
|
26 |
|
|
|
27 |
|
|
## Use directly HTML & CSS |
28 |
|
|
|
29 |
|
|
Get, and _cache_ those two document and insert them in your HTML. |
30 |
|
|
|
31 |
|
|
* ```//nav.mageia.org/css/``` |
32 |
|
|
* ```//nav.mageia.org/html/?l={html[lang]}&b={body[class]}&w=1``` |
33 |
|
|
|
34 |
|
|
and: |
35 |
|
|
|
36 |
|
|
* publish CSS in your documents. |
37 |
|
|
* put HTML in ```<div id="nav" />``` just after the ```<body>``` |
38 |
|
|
of your doc |
39 |
|
|
|
40 |
rda |
1104 |
---- |
41 |
|
|
|
42 |
rda |
1096 |
## Update your documents HTML & CSS |
43 |
|
|
|
44 |
rda |
1104 |
In both cases, you need to change your CSS rules so that they match: |
45 |
rda |
1096 |
|
46 |
|
|
> ``` |
47 |
|
|
> html, body { margin: 0; padding: 0; } |
48 |
|
|
> ``` |
49 |
|
|
|
50 |
|
|
If you want to see the navigation bar sections activated for your site/app, |
51 |
|
|
you need to update your documents' body[class] too, to match either: |
52 |
|
|
|
53 |
|
|
* ```map``` (global "home" element, mageia logo) |
54 |
|
|
* ```about``` (about section) |
55 |
|
|
* ```downloads``` (downloads & products section) |
56 |
|
|
* ```community``` (community tools & resources section) |
57 |
|
|
* ```support``` (support section) |
58 |
|
|
* ```contribute``` (contributors section) |
59 |
|
|
* ```you``` (identity, personal data & services) |
60 |
|
|
|
61 |
|
|
Finally, to have an integrated h1 title with the top navigation, put it just |
62 |
|
|
at the top of your HTML document: |
63 |
|
|
|
64 |
|
|
> ```<body> |
65 |
|
|
> <h1 id="mgnavt">your title</h1>``` |
66 |
|
|
|
67 |
|
|
|
68 |
|
|
## Features |
69 |
|
|
|
70 |
|
|
The detected and used features are: |
71 |
|
|
|
72 |
|
|
* ```html[lang]``` is used to translate the menu in the said language, |
73 |
|
|
when available |
74 |
|
|
* ```body[class]``` is not used yet. |
75 |
|
|
* ```head > meta[name="context"] value``` is not used yet. |
76 |
|
|
* ```document.location.href``` is used for stats purpose (logs). |
77 |
|
|
|
78 |
|
|
|
79 |
|
|
|
80 |
|
|
## Code & license |
81 |
|
|
|
82 |
|
|
* code is in [svn://svn.mageia.org/svn/web/nav/](http://svn.mageia.org/web/nav/) |
83 |
rda |
1236 |
* licensed under GNU GPL-3+, 2012, rda |
84 |
rda |
1096 |
* patches and discussions welcome in [Mageia Web team](https://wiki.mageia.org/en/Web_team) |
85 |
|
|
|
86 |
rda |
1236 |
---- |