Voici comment créer un menu flottant qui suit l’utilisateur lorsqu’il navigue sur le site. Le menu sera placé à gauche de notre site et lorsqu’on monte ou on descend, il sera toujours visible avec de jolies animations.
Vous pouvez consulter la démonstration ici : Démo
Commençons par créer la structure de notre fichier html.
<div id="wrapAll"> <div id="header"></div> <div id="content"> <div id="left-part"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, quas commodi cumque esse tempore tempora ad atque sunt praesentium nemo soluta tenetur molestias impedit facilis dicta velit inventore veniam dolores?</div> <div>Beatae, perferendis, incidunt, tempore non assumenda accusantium porro eius provident dignissimos quasi magni sequi iste placeat aut quaerat ratione magnam labore nisi quae vitae voluptas rem quia necessitatibus veritatis eum!</div> <div>Laboriosam, repudiandae, ab, maxime, numquam sit magni iste doloribus rem perferendis dolorum fugit rerum voluptatem eligendi natus fugiat blanditiis molestiae placeat a. Totam voluptas animi ab repellendus dicta aspernatur aliquid!</div> <div>Numquam, autem, dolorum voluptatem dignissimos obcaecati unde facilis molestiae non dicta quo aliquam eum aperiam iste adipisci architecto inventore doloremque officiis porro ullam asperiores nobis quasi impedit minima? Doloremque, fuga.</div> <div>Dolorum, sunt odit consectetur accusantium rerum laborum totam ratione voluptates quae aut. Mollitia, quis, optio neque ipsum animi tenetur asperiores necessitatibus culpa doloremque velit et repellat repellendus esse dicta delectus.</div> <div>Minima, eius, temporibus placeat sed tempora nihil illum aut blanditiis autem architecto ducimus repudiandae similique fugiat optio incidunt! In animi non optio doloribus ex consequatur deserunt dolore minus voluptas illum?</div> <div>Quasi, quidem, vitae, cumque tempora sequi officia cum sed inventore perspiciatis quia nisi nulla eum veritatis rem fuga at ex odit autem tenetur culpa. Voluptatem, reiciendis iusto rem ipsum quas!</div> <div>Quas, dolores, odio eos neque saepe iure quidem animi placeat perferendis eligendi natus recusandae nostrum? Ad eum expedita ab minus numquam officia aspernatur! Aut corporis cupiditate saepe aliquam autem mollitia.</div> <div>Natus, deleniti, nulla voluptatem omnis eius excepturi quia ut quasi laborum cumque nostrum aperiam ipsam quibusdam tenetur exercitationem vero magnam sit libero. Dolor, ipsa sequi magnam voluptas! Voluptatem, alias, molestias.</div> <div>Nobis, reiciendis quasi illum voluptatum quae quia dolores earum nihil mollitia aliquid ea maiores pariatur rerum voluptatibus itaque reprehenderit hic dolor sapiente unde quo eius deleniti saepe voluptate accusantium voluptates!</div> <div>Aliquid, id perspiciatis at ex incidunt consequatur ipsa sequi asperiores sint molestias laborum voluptatibus officia tempora non ut vero illo provident et nobis nulla repudiandae accusantium rerum doloremque minima eum.</div> <div>Pariatur, exercitationem eaque adipisci libero cum ea facere nisi perspiciatis officia quidem consequatur dicta eveniet possimus sint omnis deleniti non nostrum explicabo. Qui, fugit natus ullam iste dolorum necessitatibus minus.</div> <div>Pariatur, quo, voluptas laboriosam hic fuga quod veritatis enim voluptate deleniti aut odit et voluptatibus sint tenetur beatae! Est eaque assumenda necessitatibus provident impedit placeat ipsam libero culpa dolor ullam?</div> <div>Quae, ipsam, deleniti, tempore quia esse similique itaque error laboriosam eveniet quidem hic facere eligendi iure animi voluptas minus nostrum adipisci eius autem ad non fuga obcaecati! Nam, neque, culpa!</div> <div>Consectetur, laborum fugit officia quo doloremque similique facilis perferendis obcaecati earum quam pariatur suscipit libero eos rem nisi modi officiis adipisci saepe nemo maiores deserunt reprehenderit ratione necessitatibus. Cum, quibusdam.</div> <div>Incidunt, laudantium, laboriosam, est, dolor reiciendis tenetur vel animi ipsum aperiam eum deleniti non! Quidem, aperiam maxime accusantium iusto a nisi corporis nemo nobis magnam ab harum aspernatur odit dolore?</div> <div>Laboriosam, cum, molestiae officia possimus sit magnam aliquid voluptates exercitationem architecto consequatur error aperiam delectus beatae suscipit deserunt iste autem aut consectetur veniam cumque quam quasi natus est laborum commodi!</div> <div>Provident, similique, sint, ea ratione neque minima consequuntur sed rem velit cupiditate accusantium deleniti nobis maxime laborum voluptatem facere fugit ipsum a necessitatibus debitis esse minus nemo aperiam culpa atque.</div> <div>Error, deserunt, totam nam debitis alias labore iusto illo id expedita harum impedit eum rerum eius reiciendis ea cum qui! Unde, voluptatem esse nesciunt. Ullam, a debitis explicabo sit illo!</div> <div>Quaerat, labore, adipisci, neque dolor et blanditiis numquam quo facere fuga aspernatur assumenda animi nemo commodi rerum nostrum tempora ratione? Maiores, recusandae neque natus aliquid laboriosam assumenda impedit ea reprehenderit?</div> <div>Repudiandae, consectetur tempore atque facere blanditiis nesciunt eum at distinctio sapiente necessitatibus pariatur velit mollitia tenetur suscipit labore quos vel ullam! Officia, a repellendus quas officiis quo neque quod numquam.</div> <div>Debitis, dignissimos, id, voluptatibus quam itaque error eligendi placeat excepturi modi obcaecati repudiandae eaque architecto aliquid repellendus temporibus soluta sunt veritatis ipsam! Eos, fugiat aperiam cum sint maiores iure quis!</div> <div>Culpa, sequi, cumque, consectetur cum architecto quos sunt soluta blanditiis nostrum quae quia aut unde voluptatem dicta placeat sapiente nesciunt doloremque beatae perspiciatis excepturi vitae laudantium voluptas debitis nulla ipsa!</div> <div>Voluptatibus, iste, quae doloribus optio cumque dolorem dicta quas molestias assumenda numquam excepturi commodi quibusdam natus enim veniam placeat distinctio maxime quod officia consequuntur expedita exercitationem recusandae temporibus sit quos!</div> <div>Obcaecati, hic, dicta, ipsa blanditiis illo excepturi maiores voluptate fugiat tempora quod eligendi nobis esse minima magni recusandae aliquid perferendis quasi facere laudantium eveniet doloremque explicabo labore pariatur mollitia placeat.</div> <div>Explicabo, iste, impedit, unde, amet doloremque quibusdam suscipit assumenda in repellat quasi dolorum dicta incidunt quaerat ipsam quia reprehenderit quam voluptatum velit voluptate quod perferendis esse delectus rerum est sit.</div> <div>Voluptas, fuga, laudantium, dolor placeat impedit quos dolores possimus aliquam reiciendis nesciunt repellendus facilis officiis dicta ipsum beatae quam ipsa quas consectetur optio suscipit culpa quidem incidunt ratione laboriosam debitis.</div> <div>Voluptatum, at, illo aut quo incidunt pariatur vel ex vero possimus placeat iste laboriosam in tempore officiis cupiditate facere maxime. Exercitationem, impedit, doloremque expedita eos vero officiis blanditiis consequatur deserunt?</div> <div>Fugiat, ut, molestias, voluptatum, quidem similique dignissimos aut nemo architecto voluptas pariatur molestiae quia enim asperiores quis beatae recusandae ipsa. Minima, neque voluptate autem doloribus nostrum sint id doloremque beatae.</div> <div>Repudiandae, consectetur, quos, aut hic voluptatibus omnis voluptate praesentium esse sit optio facere recusandae delectus ducimus explicabo rerum corrupti nihil? A, dignissimos quasi natus officia molestias cupiditate mollitia blanditiis vero!</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, repellendus, fugiat placeat saepe asperiores nisi maiores molestias omnis sequi error illo debitis harum cum neque quia ducimus magni quisquam odio?</div> <div>Tempore, quis, harum, recusandae, adipisci molestiae quos dolore consectetur fugit temporibus in voluptate deleniti aut quae velit aliquam consequuntur deserunt nobis nesciunt quas corporis sint reprehenderit quo ipsam excepturi officia.</div> <div>Quo, voluptatem, molestias velit eius sequi possimus accusantium totam laudantium quia placeat quibusdam reprehenderit eveniet quaerat fuga saepe non adipisci fugiat nisi accusamus animi vitae facere tempore asperiores aliquid tenetur.</div> <div>Adipisci, sit nostrum explicabo sunt ex asperiores odit doloremque quam est placeat quae repellendus alias illum atque sequi ullam facere in laboriosam assumenda eaque deserunt excepturi ipsa nulla ipsum eos!</div> <div>Animi, recusandae, vero numquam praesentium eveniet blanditiis itaque aliquam iste doloremque similique repellat aut accusantium quo molestiae adipisci voluptate placeat error fuga voluptatum quam delectus quasi aspernatur eos ratione nihil.</div> <div>Error, aperiam doloribus animi ab pariatur expedita deserunt! Deleniti, dolorum, magni sunt consequatur atque asperiores aperiam dignissimos placeat amet quod nemo sit officiis debitis nostrum quaerat hic voluptates perspiciatis saepe.</div> <div>Voluptas, exercitationem, nemo ullam odio qui cupiditate dolor eos ut perferendis veniam sint modi facilis autem quod doloribus. Officiis, ex quidem error molestiae accusantium quas inventore voluptas et explicabo perspiciatis!</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, asperiores sed earum placeat blanditiis explicabo reiciendis repellendus quam numquam doloribus sit veniam veritatis porro ex fugit consequuntur ullam nostrum ipsam?</div> <div>Amet, repudiandae, assumenda, maxime temporibus vel qui error optio ipsam eligendi sint iste quos veritatis aliquid non possimus ab autem corporis doloribus officiis illum dolores at voluptatibus! Consectetur, harum, natus!</div> <div>Asperiores, reiciendis fugit officia quasi nemo magnam sequi aliquam dolorem commodi officiis dolores cupiditate earum consequatur maxime odit vel aspernatur dignissimos? Saepe, perspiciatis officiis vitae quae ab similique ducimus architecto.</div> <div>Quis, omnis, natus praesentium maiores autem voluptatibus cum quod beatae eveniet quisquam. Tenetur, minus, accusamus architecto vel odit nulla natus voluptatibus aperiam dolorum voluptas animi veniam voluptatum voluptates reiciendis culpa.</div> <div>Eveniet, saepe, consequuntur, officia fugit ratione necessitatibus repudiandae dignissimos ipsam amet ipsum ad consequatur voluptatem corporis perferendis ipsa reprehenderit atque possimus aperiam hic voluptatibus sequi quidem dolorem molestias. Ullam, distinctio.</div> <div>Doloremque, consectetur, minus, magnam rerum repellat impedit unde aut dolor similique facilis itaque sequi odit placeat. Sequi, adipisci, nulla cumque magni nostrum repellendus suscipit maiores pariatur voluptate id harum nihil.</div> <div>Animi, consequuntur, consequatur, ipsum quasi repudiandae expedita sapiente optio impedit assumenda maxime molestiae libero accusantium quibusdam! Sapiente, maiores dolores quia quam magnam perspiciatis debitis laborum officiis eos consequatur fuga non?</div> <div>Quas laudantium adipisci distinctio vel architecto. Soluta, consequatur, temporibus, blanditiis, consequuntur ullam eveniet dolor tempore numquam architecto reiciendis atque doloribus maxime reprehenderit. Deleniti, repudiandae, quos soluta culpa temporibus libero labore.</div> <div>Eaque, omnis, sed vero iusto illo quis enim ea soluta deserunt reiciendis fugit consequuntur unde voluptatibus delectus placeat cumque ex repellendus maxime. Veritatis, assumenda aspernatur ex asperiores nam incidunt maiores.</div> <div>A dolor voluptatem similique labore dolores consequatur nostrum. Quos, molestiae, quae, quasi, ex tempore dicta illum quibusdam soluta facilis eveniet temporibus vero eaque inventore quo modi sed iusto autem in!</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, sit, quibusdam, nisi deleniti maiores nemo illum doloribus aliquam dolores minima atque sunt at veniam nihil ex mollitia ratione facere nulla.</div> <div>Porro, ab, unde totam earum cumque harum illo eum nobis sed maxime commodi fuga nisi blanditiis laboriosam dicta. Eius, ducimus, blanditiis cum obcaecati consequatur tempore maxime. Corporis, eveniet voluptatibus quia.</div> <div>Dolores, rerum, ex nobis repudiandae unde itaque at nam necessitatibus voluptates blanditiis harum ducimus doloremque recusandae culpa saepe quam perspiciatis iste ipsum. Aperiam, debitis molestias omnis obcaecati odio labore esse.</div> <div>Qui, vero, obcaecati minus atque exercitationem quibusdam modi saepe neque voluptate soluta eaque necessitatibus asperiores culpa rem rerum nulla at. Natus, explicabo molestiae praesentium ea voluptatem modi dolores voluptates illo!</div> <div>Modi, quam, officiis suscipit est velit molestiae eligendi blanditiis deserunt distinctio harum! Magnam, temporibus possimus harum voluptates velit sapiente quidem! Id, natus molestiae ab pariatur sit harum labore alias facilis!</div> <div>Dolores, cupiditate, suscipit neque maxime possimus asperiores velit vero minima quo et recusandae porro repudiandae. Quidem, porro, nam, qui consequatur dignissimos commodi dicta quasi excepturi illum quod eaque quisquam expedita!</div> <div>Nulla, dicta, id, veritatis aut itaque ullam natus ipsa eum quia earum consequuntur modi inventore at quisquam ad. Vel, temporibus, accusantium minus excepturi suscipit tenetur ullam in corporis dolor sit?</div> <div>Odit, exercitationem, corporis, voluptatem nostrum enim facilis molestias obcaecati esse commodi dolores aut minus nobis quibusdam dolorum eveniet. Delectus, nisi accusantium rerum ad fuga animi tempora esse. Fugiat, in, at?</div> <div>Ipsum, voluptatem, voluptates alias fugit possimus eum aspernatur libero nisi accusamus maiores assumenda quaerat in quos optio vel ad ducimus explicabo pariatur fugiat totam sequi tempore velit a provident non?</div> <div>Commodi, beatae, non, totam dolores dicta in harum dignissimos soluta sequi sit veritatis quis amet suscipit adipisci sed perspiciatis fugit ab quasi voluptatem facere recusandae a obcaecati hic illum at!</div> </div> <div id="right-part"> <div id="floatMenu"> <ul> <li><a href="#" onclick="return false;"> Accueil </a></li> <li><a href="#" onclick="return false;"> Exemple </a></li> <li><a href="#" onclick="return false;"> Plan du site </a></li> <li><a href="#" onclick="return false;"> FAQ </a></li> <li><a href="#" onclick="return false;"> Contact </a></li> </ul> </div> </div> </div> </div>
Ensuite voici le contenu du fichier CSS
#wrapAll { width: 1000px; margin: 0 auto;}
#header { height: 120px; border: 1px solid #e1e1e1; }
#left-part { float: left; width: 690px; padding: 5px; line-height: 20px; text-align: justify;}
#left-part div { padding-bottom: 10px;}
#right-part { float: right;width: 300px; position: relative;}
#floatMenu { position:absolute; margin-left:0px; width:300px; }
#floatMenu ul { margin-left: -30px; list-style: none; width:290px;}
#floatMenu ul li { margin-bottom: 1px;}
#floatMenu ul li a { display:block; border:0px solid #999; background-color:#0175ae; border-left:6px solid #999; border-right:6px solid #999; text-decoration:none; color:#ffffff; padding:10px 5px 10px 15px; }
#floatMenu ul li a:hover { background-color: #ffffff; color: #0175ae; }
Enfin, le code jQuery qui fera le nécessaire
$(document).ready(function(){
$('#floatMenu').each(function(){
var parent = $(this).parent();
var defaultTop = $(this).offset().top;
var thisElement = $(this);
$(window).scroll(function () {
var livePosition = $(window).scrollTop();
var offset = livePosition-parent.offset().top+20;
var offsetBack = defaultTop-parent.offset().top;
if (livePosition > defaultTop) {
thisElement.animate({top:offset},{duration:500,queue:false});
} else {
thisElement.animate({top:offsetBack},{duration:500,queue:false});
}
});
});
});
Vous pouvez consulter la démonstration ici : Démo