136 lines
11 KiB
HTML
136 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>YBlog - <em>Focus</em> > Minimalisme</title>
|
||
<meta name="keywords" content="jQuery, design, web" />
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="../../../../Scratch/img/favicon.ico" />
|
||
<link rel="stylesheet" type="text/css" href="../../../../css/y.css" />
|
||
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
|
||
<!--[if lt IE 9]>
|
||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||
<![endif]-->
|
||
<!-- IndieAuth -->
|
||
<link href="https://twitter.com/yogsototh" rel="me">
|
||
<link href="https://github.com/yogsototh" rel="me">
|
||
<link href="mailto:yann.esposito@gmail.com" rel="me">
|
||
<link rel="pgpkey" href="../../../../pubkey.txt">
|
||
</head>
|
||
<body lang="fr" class="article">
|
||
<div id="content">
|
||
<div id="header">
|
||
<div id="choix">
|
||
<span id="choixlang">
|
||
<a href="../../../../Scratch/en/blog/2009-10-Focus-vs-Minimalism/">Anglais</a>
|
||
</span>
|
||
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
|
||
<span class="flush"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="titre">
|
||
<h1><em>Focus</em> > Minimalisme</h1>
|
||
<h2>Cacher la navigation pour une meilleure concentration</h2>
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
<div id="afterheader" class="article">
|
||
<div class="corps">
|
||
<p>Je crois que le but du minimalisme est de facilité le <em><strong>Focus</strong></em> c’est-à-dire la concentration sur le contenu. Je crois que le minimalisme doit être un moyen et pas une fin. Le <em>Focus</em> devrait être le but, et je pense que le minimalisme n’est pas obligatoire pour l’atteindre.</p>
|
||
<p>C’est pourquoi mon design n’est pas minimaliste. Mais j’ai décidé d’enlever la majorité des objets servant à la navigation pour améliorer l’attention sur l’article. Peut-être que plus tard, je préfèrerai laisser le menu dans les pages normales du site pour ne le cacher que dans les articles de blog. Pour l’instant je le cache partout.</p>
|
||
<hr />
|
||
<h2 id="détails-techniques">Détails techniques</h2>
|
||
<p>Pour ceux qui souhaitent connaître les détails techniques derrière le menu apparaissant/disparaissant, voici le code utilisant jQuery.</p>
|
||
<p>L’HTML :</p>
|
||
<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb1-1" title="1"><span class="kw"><div</span><span class="ot"> id=</span><span class="st">"menuButton"</span><span class="kw">></div></span></a>
|
||
<a class="sourceLine" id="cb1-2" title="2"><span class="kw"><div</span><span class="ot"> id=</span><span class="st">"entete"</span><span class="kw">></span>#content of the menu<span class="kw"></div></span></a></code></pre></div>
|
||
<p>La CSS :</p>
|
||
<div class="sourceCode" id="cb2"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb2-1" title="1"><span class="pp">#menuButton</span> {</a>
|
||
<a class="sourceLine" id="cb2-2" title="2"> <span class="kw">font-size</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-3" title="3"> <span class="kw">height</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-4" title="4"> <span class="kw">line-height</span>: <span class="dv">1.8</span><span class="dt">em</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-5" title="5"> <span class="kw">width</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-6" title="6"> <span class="kw">position</span>: <span class="dv">fixed</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-7" title="7"> <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-8" title="8"> <span class="kw">top</span>: <span class="dv">0</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-9" title="9"> <span class="kw">z-index</span>: <span class="dv">9001</span> }</a>
|
||
<a class="sourceLine" id="cb2-10" title="10"></a>
|
||
<a class="sourceLine" id="cb2-11" title="11"><span class="pp">#menuButton</span><span class="in">:hover</span> {</a>
|
||
<a class="sourceLine" id="cb2-12" title="12"> <span class="kw">cursor</span>: <span class="dv">pointer</span><span class="op">;</span> }</a>
|
||
<a class="sourceLine" id="cb2-13" title="13"></a>
|
||
<a class="sourceLine" id="cb2-14" title="14"><span class="pp">#entete</span> {</a>
|
||
<a class="sourceLine" id="cb2-15" title="15"> <span class="kw">top</span>: <span class="dv">5</span><span class="dt">em</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-16" title="16"> <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-17" title="17"> <span class="kw">position</span>: <span class="dv">fixed</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-18" title="18"> <span class="kw">width</span>: <span class="dv">10</span><span class="dt">em</span><span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb2-19" title="19"> <span class="kw">z-index</span>: <span class="dv">9000</span><span class="op">;</span> }</a></code></pre></div>
|
||
<p>Le code javascript (utilisant jQuery)</p>
|
||
<div class="sourceCode" id="cb3"><pre class="sourceCode javascript"><code class="sourceCode javascript"><a class="sourceLine" id="cb3-1" title="1"><span class="kw">function</span> <span class="at">hideMenu</span>() <span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb3-2" title="2"> <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">animate</span>(<span class="op">{</span><span class="dt">left</span><span class="op">:</span><span class="st">"-10em"</span><span class="op">},</span> <span class="dv">500</span> )<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb3-3" title="3"> <span class="at">$</span>(<span class="st">'#menuButton'</span>).<span class="at">html</span>(<span class="st">'&rarr;'</span>)<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb3-4" title="4"><span class="op">}</span></a>
|
||
<a class="sourceLine" id="cb3-5" title="5"><span class="kw">function</span> <span class="at">showMenu</span>() <span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb3-6" title="6"> <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">animate</span>(<span class="op">{</span><span class="dt">left</span><span class="op">:</span><span class="st">"0em"</span><span class="op">},</span> <span class="dv">500</span> )<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb3-7" title="7"> <span class="at">$</span>(<span class="st">'#menuButton'</span>).<span class="at">html</span>(<span class="st">'&larr;'</span>)<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb3-8" title="8"><span class="op">}</span></a>
|
||
<a class="sourceLine" id="cb3-9" title="9"><span class="kw">function</span> <span class="at">toggleMenu</span>() <span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb3-10" title="10"> <span class="cf">if</span> ( <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">css</span>(<span class="st">'left'</span>)<span class="op">==</span><span class="st">'-10em'</span> ) <span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb3-11" title="11"> <span class="at">showMenu</span>()<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb3-12" title="12"> <span class="op">}</span> <span class="cf">else</span> <span class="op">{</span></a>
|
||
<a class="sourceLine" id="cb3-13" title="13"> <span class="at">hideMenu</span>()<span class="op">;</span></a>
|
||
<a class="sourceLine" id="cb3-14" title="14"> <span class="op">}</span></a>
|
||
<a class="sourceLine" id="cb3-15" title="15"><span class="op">}</span></a></code></pre></div>
|
||
<p>Le résultat est visible dans le coin en haut à droite de cet article.</p>
|
||
</div>
|
||
<div id="afterarticle">
|
||
<div id="social">
|
||
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
|
||
·
|
||
<a href="https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/%20via%20@yogsototh" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
|
||
·
|
||
<a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</a>
|
||
<br />
|
||
<a class="message" href="../../../../Scratch/fr/blog/Social-link-the-right-way/">Ces liens sociaux préservent votre vie privée</a>
|
||
</div>
|
||
<div id="navigation">
|
||
<a href="../../../../">Accueil</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/blog">Blog</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/softwares">Logiciels</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/about">Auteur</a>
|
||
</div>
|
||
<div id="totop"><a href="#header">↑ Top ↑</a></div>
|
||
<div id="bottom">
|
||
<div>
|
||
Published on 2009-10-22
|
||
</div>
|
||
<div>
|
||
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
|
||
</div>
|
||
<div>
|
||
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Yann Esposito©</a>
|
||
</div>
|
||
|
||
<div>
|
||
Done with
|
||
<a href="http://www.vim.org" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
|
||
<a href="http://spacemacs.org" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
|
||
<span class="pala">&</span>
|
||
<a href="http://nanoc.ws" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
|
||
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|