Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boas amigos, Estou aprender e adaptar o meu Website para responsivo, encontrei um menu do qual gostei e estou a tentar adaptar ao meu site... Enquanto tentava adaptar deparei me com um problema, ter de escrever 2 vezes o mesmo trecho de HTML para conseguir o efeito actual, a minha duvida é se há possibilidade de adaptar o código, para funcionar simplesmente com um trecho de HTML Deixo abaixo os códigos, desde de já agradeço. Html:
<meta charset="utf-8"/> <style type="text/css">
#nav-mobile,
#nav-search { display: none. height: 71px. }
#bar { height: 50px. background-color: #222. } margin: 0 auto. max-width: 1230px. position: relative. padding: 0 10px. } text-decoration: none. } width:180px. border: 0. position: absolute. left: 10px. top: 1px. } display: block. border-right: 0. margin:10px 0. } color: #fff. border: 0. width: 20px. height: 20px. padding: 8px. border-radius: 5px. background: #000. position: absolute. top: 7px. display: inline-block. text-align: center. border: 1px solid #555. border-top: 1px solid #333. background-color: #666666. display: none. font-family: entypo. font-size: 18px. line-height: 20px. } background-color: #444444. color: #999. } right: 10px. } margin: 0. padding: 0. list-style: none. height: 50px. overflow: hidden. } float: left. border-right: 1px solid #333333. border-left: 1px solid #666666. } border-right: 0. } border-left: 0. margin-left:190px. } color: #ec7f27. -webkit-box-shadow: inset 0 0 10px 3px #000000. -moz-box-shadow: inset 0 0 10px 3px #000000. box-shadow: inset 0 0 10px 3px #000000. font-weight:bold. } color: #fff. border: 0. padding: 0 15px. font-size: 14px. text-shadow: 0 0 20px #000. display: block. height: 56px. position: relative. line-height: 18px. margin: 0. font-weight: bold. } color: #ec7f27. } position: relative. display: block. height: 100%. top: 14px. } font-family: entypo. font-style: normal. font-size: 18px. padding-right: 8px. background:#222. }.search { width: 145px. height: 25px. position: absolute. right: 10px. top: 12px. } width: 100%. height: 25px. padding: 4px 25px 4px 10px. border: 0. font-size: 12px. color: #fff. border-radius: 8px. background: #eaeaea. } position: absolute. top: 0. right:0. background: #444444. width: 25px. height: 25px. border: 0. border-top-right-radius:7px. border-bottom-right-radius:7px. color: #fff. font-size: 18px. line-height: 10px. cursor: pointer. } color: #ec7f27. }
#nav-search { height: 70px. position: relative. z-index: 9999. background:#222. border-bottom:1px #fff solid. } padding: 20px. margin: 0 auto. width: 100%. position: static. -webkit-box-sizing: border-box. -moz-box-sizing: border-box. box-sizing: border-box. } font-size: 14px. height: 35px. color: #fff. padding: 4px 13px. } right: 31px. top: 23px. font-size: 18px. }.wrapper { position: relative. margin: 0 auto. }.logo { position: absolute. left: 10px. top: 20px. width:180px. }.wrapper { margin: 20px 10px. } position: absolute. top: 0. left: 0. width: 180px. height:30px. } padding-left: 240px. } margin: 3px 0 0 0. padding: 15px 0 0 0. list-style: none. } float: left. padding-right: 10px. color: #333. height: 18px. } font-size: 16px. font-style: normal. position: relative. top: -6px. line-height: 0. padding-right: 5px. font-weight: bold. } border: 0. position: relative. top: -5px. font-weight: bold. } padding-left: 60px. }
</style> <link rel="stylesheet" href="[http://www.test.grandemoca.com/menu/main.css](http://www.test.grandemoca.com/menu/main.css)" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <div id="nav-mobile"> <ul class="nav"> <li class="home active"><a href="/"><span><i>⌂</i>Inicio</span></a></li> <li class="nav-movies"><a href="/videos"><span><i>📖</i>Videos</span></a></li> <li class=" "><a href="/imagens"><span><i>⚒</i>Imagens</span></a></li> <li class=" "><a href="/anedotas"><span><i>📣</i>Anedotas</span></a></li> <li class=" "><a href="/jogos"><span><i>✉</i>Jogos</span></a></li> <li class=" "><a href="/filmes"><span><i>✉</i>Filmes</span></a></li> <li class=" "><a href="/musicas"><span><i>✉</i>Musicas</span></a></li> </ul> </div> <div id="nav-search"> <form action="/search" method="get"> <div class="search"> <input type="text" name="search"> <button type="submit">🔍</button> </div> </form> </div> <div id="bar"> <div class="wrapper"> <a href="/" class="logo"><img src="http://www.test.grandemoca.com/application/images/logo.png" alt=""></a> <a href="#" class="menu button">☰</a> <a href="#" class="find button">🔍</a> <ul class="nav"> <li class="home active"><a href="/"><span><i>⌂</i>Inicio</span></a></li> <li class="nav-movies"><a href="/videos"><span><i>📖</i>Videos</span></a></li> <li class=" "><a href="/imagens"><span><i>⚒</i>Imagens</span></a></li> <li class=" "><a href="/anedotas"><span><i>📣</i>Anedotas</span></a></li> <li class=" "><a href="/jogos"><span><i>✉</i>Jogos</span></a></li> <li class=" "><a href="/filmes"><span><i>✉</i>Filmes</span></a></li> <li class=" "><a href="/musicas"><span><i>✉</i>Musicas</span></a></li> <li class="nav-registo"><a href="/registo"><span><i>✉</i>Registo</span></a></li> <li class="nav-login"><a href="/login"><span><i>✉</i>Login</span></a></li> </ul> <div class="search clearfix"> <form action="/search" method="get"> <input type="" name="search"> <button type="submit">🔍</button> </form> </div> </div> </div> <script src="http://www.test.grandemoca.com/menu/main.js"></script>.nav-registo{ display:none. } }.nav-login{ display:none. } } position: absolute. top: 20px. left: 390px. width: 277px. height: 24px. } img.fui-label2 { position: absolute. top: 40px. left: 390px. width: 243px. height: 24px. } } right: 10px. display: block. } #bar.search { display: none. }
} position: absolute. top: 0px. left: 10px. width: 180px. height: 30px. } img.fui-label1 { position: absolute. top: 16px. left: 320px. width: 200px. height: 20px. } img.fui-label2 { position: absolute. top: 33px. left: 320px. width: 190px. height: 19px. } img.fui-button { position: absolute. top: 14px. right: 30px. width: 100px. height: 40px. } #bar a.logo { border: 0. left: 50%. top: 1px. margin-left: -90px. width:180px. } #bar a.button { display: block. } #bar.search { display: none. } #bar ul.nav { display: none. } #nav-mobile ul.nav { width: 100%. margin: 0 0 0 0. padding: 10px 0 0 0!important. list-style: none. height: 60px. overflow: hidden. background:#222. } #nav-mobile ul.nav a { text-decoration: none. color: #fff. padding: 0 15px. font-size: 12px. text-shadow: 0 0 20px #000. display: block. height: 60px. border-right: 1px solid #202020. border-left: 1px solid #444444. line-height: 30px. font-weight:bold. } #nav-mobile ul.nav a:hover { color: #ccc. } #nav-mobile ul.nav i { font-size: 26px. padding: 0. position: static. display: block. } #nav-mobile ul.nav li { width: 12%. border: 0. text-align: center. } #nav-mobile ul.nav li.home { display: block. border-left: 0. margin:0. }.nav-movies{ margin: 0. } #nav-mobile ul.nav li.home a { display: block. border-left: 0. margin:0. } #nav-mobile ul.nav li.logo { display: none. } #nav-mobile ul.nav li.active a { background: 0. box-shadow: none. color: #ec7f27. } #nav-mobile ul.nav li:last-child { border-right: 0. } #nav-mobile ul.nav li:last-child a { border-right: 0. } #nav-mobile ul.nav li span { position: static. } #bar ul.nav { padding: 0 0 0 50px. } #bar ul.nav.home { display: none. } #bar a.logo { display: block. } header.wrapper { height: 110px. padding-top: 20px. } header.wrapper.logo { display: none. } header.wrapper.ads728 { position: static. margin: 0 auto 0 auto. width: 750px. } #heading.post-external-link.wrapper.post-heading { padding-left: 0px. } #heading li { height: 30px. } #heading li i { font-size: 32px. top: -5px. } #heading li a { top: -7px. }
} #nav-mobile, #nav-search { display: none!important. }
} display: block. } ul.nav a { padding: 0 10px. font-size: 12px. height: 60px. font-weight:bold. } #bar a.button.find { right: 10px. } #bar a.button.menu { left: 10px. }.home{ margin:0. }
}.home{ margin:0. } img.fui-logo { position: absolute. top: 5px. left: 10px. width: 180px. height: 30px. } img.fui-button { position: absolute. top: 10px. right: 10px. width: 180px. height: 30px. } #bar ul.nav a { padding: 0 6px. font-size: 10px. height: 60px. font-weight:bold. } #heading { background-image: none!important. min-height: auto. } #heading.wrapper { margin: 10px 10px. } #heading h1 { font-size: 32px. line-height: 48px. } #heading li { background: 0. color: #000. height: 18px. } } display: block. } header.logo { display: none. }
}.home{ margin:0. } header.wrapper { padding: 10px 0 0 0. height: 100px. } header.wrapper.logo { position: absolute. margin: 0 auto. width: 180px. display: block. } header.wrapper{ display: none. } #container { padding: 0 5px. } #content-wrap { float: none. }
}$(function () { $('#bar a.menu').click(function () { $('#nav-mobile').slideToggle(). if ($(this).hasClass('active')) { $(this).removeClass('active'). } else { $('#nav-search').hide(). $('#bar a.find').removeClass('active'). $(this).addClass('active'). } return false. }). $('#bar a.find').click(function () { $('#nav-search').slideToggle(). if ($(this).hasClass('active')) { $(this).removeClass('active'). } else { $('#nav-mobile').hide(). $('#bar a.menu').removeClass('active'). $(this).addClass('active'). } return false. }). }). Carregando comentários...