Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Problem z menu (dla mobilnych) tylko na jednej zakładce

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 15.04.2017, 17:33:34

Witam, po raz drugi w ciągu 2 dni :)
otóż mam dość dziwny problem i już nie mam pomysłów jak sobie z tym poradzić. Mianowicie przystosowuje stronę do urządzeń mobilnych i zaciąłem się na menu, które standardowo się pokazuje jak się kliknie te śmieszne 3 paski. Już prawię skończyłem, ale później odkryłem, że przeglądarki oparte na Webkit nie wyświetlają poprawnie mojego menu i co najlepsze występuje to tylko na stronie głównej mojej strony. Na pozostałych zakładkach wszystko jest jak powinno.

Na początku myślałem, że to przez ten slideshow na środku, ale po włączeniu go na innych zakładkach problem nie występował i menu działało dokładnie tak jak powinno.

Tak to wygląda np. w operze

Obrazek

A tak wygląda w mozilli

Obrazek

Jakieś pomysły jak to naprawić ? :/
patri4rch
Posty: 7
Dołączył(a): 14.04.2017

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 15.04.2017, 19:02:26

Łatwiej byłoby gdybyś dał kodzik
pablop76
Posty: 23
Dołączył(a): 13.04.2016

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 15.04.2017, 19:03:59

Kod: Zaznacz cały
@media screen and (min-width: 831px) {
#nav { float: left;letter-spacing: 0;margin: 70px auto 0 25px;position: relative;z-index: 10;}
#nav ul {margin-left: 0px; padding:0; float:left; height:24px; }
#nav ul li {list-style:none;float:left;position:relative; padding-right:0px 20px; margin:0; margin-right:5px;}
#nav ul li a {color: #c4d607;display: block;font-family: 'Tahoma';font-size: 17px;font-weight: bold;padding: 0 11px;text-align: left;text-shadow: none; border-right:none; padding:15px 11px 15px; margin-top:-44px; border-radius: 10px / 10px;}
#nav ul li a:hover, #nav ul li.active a, #nav ul li:hover a  { color:#3f3f3e; text-decoration:none; background:#c4d607;  border-bottom:2px solid #c4d607;}
#nav ul li ul {position:relative;width:80px;left:-999em;border-top:0; margin:0; padding:0; }
#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
#nav ul li ul li {padding: 0; height:auto; width:80px; margin:0 auto; border:0; text-align: left; }
#nav ul li ul li:hover ul {left:180px; top:0}
#nav ul li:hover ul li a {text-shadow:none;}
#nav ul li:hover ul li { background:none;}
#nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:30px;line-height:30px; background:#45646c;border-bottom:1px solid #4e6d75; border-right:0; color:#d1d1d1; font-size:12px;font-weight:normal; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow:none ;font-size:14px;}
#nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow:none ;text-align: left; border-radius:0; background: #174955; color:#fff; text-shadow:none; }
#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}
}
#nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}
#nav ul li ul li ul li:hover ul {left:180px;}
#nav ul li ul li ul li ul li ul li {left:-999em;}
#nav ul li ul li ul li ul li:hover ul li{left:0;}
patri4rch
Posty: 7
Dołączył(a): 14.04.2017

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 15.04.2017, 19:27:58

Czy nie jest tak, że #nav position: relative; z-index: 10;
powoduje przysłanianie list ?
daj im z-index: 11;
pablop76
Posty: 23
Dołączył(a): 13.04.2016

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 15.04.2017, 19:41:38

Niestety to nie to :/ nie pomogło
patri4rch
Posty: 7
Dołączył(a): 14.04.2017

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 15.04.2017, 19:46:58

To fajnie. Przysłaniał inny element. Ale bez całego kodu nie wiem który.
\To w końcu pomogło czy nie. Bo usunąłeś edit.
pablop76
Posty: 23
Dołączył(a): 13.04.2016

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 15.04.2017, 20:08:06

Tak usunąłem myślałem, że nikt jeszcze nie przeczytał zanim pośpiesznie się ucieszyłem z efektu. Zmiana z-index nic nie dała, dlatego napisałem, że się udało bo przez przypadek odświeżyłem stronę w mozilli gdzie wszystko działa :/

Dodam, że największy z-index jaki ma ten slider to 3. I czemu na innych zakładkach działa, a na stronie głównej nie ? Wspomnę tylko, że włączenie slidera na innych zakładkach nie powoduje takiego efektu, menu działa poprawnie
patri4rch
Posty: 7
Dołączył(a): 14.04.2017

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 15.04.2017, 21:03:11

Czy możesz wstawić html + css fragmentu strony ale tak żeby było widać problem?
pablop76
Posty: 23
Dołączył(a): 13.04.2016

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 15.04.2017, 21:34:39

Jeszcze jedno. position:relative; i zmiana położenia elementu left:-999em to nie jest dobry pomysł. Właśnie przy zmianie wielkości ekranu powoduje nieprzewidywalne efekty, ponieważ jest to zmiana względem okna przeglądarki. position: relative; stosuje się do oznaczenia elementu zawierajacego dla position: absolute;
pablop76
Posty: 23
Dołączył(a): 13.04.2016

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 16.04.2017, 19:30:02

Wiesz co to jest template dla joomli i nie wiem czy Ci dobrego htmla wkleję ale to jest index.php

Kod: Zaznacz cały
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
   <head>
      <?php require(dirname(__FILE__)."/functions.php");?>
      <?php require(dirname(__FILE__)."/modules/req_css.php");?>
   </head>

<body class="background">

      <div id="header-w">
         <div id="header">
         <div class="logo-container">
         <?php if ($logotype == 'image' ) : ?><?php if ($logo != null ) : ?>
         <div class="logo"><a href="<?php echo $this->baseurl ?>"><img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($logo); ?>" alt="logo" /></a></div><?php else : ?>
         <div class="logo"><a href="<?php echo $this->baseurl ?>/"><img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/logo.png" alt="logo" ></a></div><?php endif; ?><?php endif; ?>
         <?php if ($logotype == 'text' ) : ?><div class="logo"><a href="<?php echo $this->baseurl ?>"><?php echo htmlspecialchars($sitetitle);?></a></div><?php endif; ?>
         </div>
         
         <?php if ($this->params->get( 'socialdisable' )) : ?><?php endif; ?>
         <?php if ($this->params->get( 'slogandisable' )) : ?><div class="slogan"><?php echo ($slogan); ?></div><?php endif; ?>   
         

            <nav class="clearfix">
               <div id="nav"><jdoc:include type="modules" name="mainmenu" style="none" /></div>
               <a href="#" id="pull"></a>
            </nav>   
         
         
         </div> <!-- end header -->
      </div><!-- end header-w -->

      
<div class="container-fluid" id="relative">
<div id="wrapper-w"><?php include 'html/template.php';?>
<div id="wrapper">

 <!-- Slideshow -->
 <div id="firstbox" class="clearfix">
   <div id="slideshow"><?php if ($this->params->get( 'slidehome' )) : ?>   
      <?php $app = JFactory::getApplication(); $menu = $app->getMenu(); $lang = JFactory::getLanguage();
         if ($menu->getActive() == $menu->getDefault($lang->getTag())) : ?>
         <?php include "slideshow/slideshow.php"; ?><?php endif; ?>
      <?php else : ?>
         <?php include "slideshow/slideshow.php"; ?><?php endif; ?>
   </div>
   
   <?php $app = JFactory::getApplication(); $menu = $app->getMenu(); $lang = JFactory::getLanguage(); if ($menu->getActive() == $menu->getDefault($lang->getTag())) : ?>
   <div id="socialbox">
   <?php include "modules/socialbuttons.php"; ?>
   </div>
   
   <jdoc:include type="modules" name="position-0" style="hq" />
   
   <?php endif; ?>
   
   
</div>   
<!-- END Slideshow -->   


<?php $app = JFactory::getApplication(); $menu = $app->getMenu(); $lang = JFactory::getLanguage(); if ($menu->getActive() == $menu->getDefault($lang->getTag())) : ?>
<?php if($this->countModules('top1') xor $this->countModules('top2') xor $this->countModules('top3')) : ?>
      <div id="top" class="clearfix">
         <div class="top1"><jdoc:include type="modules" name="top1" style="xhtml" /></div>
         <div class="top2"><jdoc:include type="modules" name="top2" style="xhtml" /></div>
         <div class="top3"><jdoc:include type="modules" name="top3" style="xhtml" /></div>
      </div>
<?php endif; ?><?php endif; ?>              
   
   <div id="main-content">   
    <?php if($this->countModules('left') xor $this->countModules('right')) $maincol_sufix = '_one';
     elseif(!$this->countModules('left') and !$this->countModules('right'))$maincol_sufix = '_none';
     else $maincol_sufix = '_both'; ?><?php include "html/com_content/archive/function.php"; ?>

<!-- Left Sidebar -->       
    <?php if($this->countModules('left') and JRequest::getCmd('layout') != 'form') : ?>
         <div id="leftbar-w">
         <div id="sidebar"><jdoc:include type="modules" name="left" style="hq" /></div>
         </div>
    <?php endif; ?>    

<!-- Center -->   
   <div id="centercontent<?php echo $maincol_sufix; ?>">
   <div class="clearpad"><jdoc:include type="component" /></div>   
      <?php if ($this->countModules('breadcrumb')) : ?>
        <jdoc:include type="modules" name="breadcrumb"  style="none"/>
        <?php endif; ?>
   </div>      
   
<!-- Right Sidebar -->   
    <?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
         <div id="rightbar-w">
         <div id="sidebar"><jdoc:include type="modules" name="right" style="hq" /></div>
         </div>
    <?php endif; ?>   
   
      <div class="clr"></div>
    </div>         

<!-- TABS -->      

<div id="box">
<div id="right"><?php if ($this->countModules('newsflash')) : ?><jdoc:include type="modules" name="newsflash" style="xhtml" /><?php endif; ?></div>

<?php if (($this->countModules('tab1')) || ($this->countModules('tab2')) || ($this->countModules('tab3'))) :?>
<div class="tabs" id="left">
 
<?php if ($this->countModules('tab1')) : ?>
       <div class="tab">
           <input id="tab-4" name="tab-group-2" checked="checked" type="radio">
           <label for="tab-4">Tab1</label>
           <div class="content">
               <p><jdoc:include type="modules" name="tab1" style="xhtml" /></p>
           </div>
       </div>
<?php endif; ?>         
       
<?php if ($this->countModules('tab2')) : ?>      
       <div class="tab">
           <input id="tab-5" name="tab-group-2" type="radio">
           <label for="tab-5">Tab2</label>
           <div class="content">
               <p><jdoc:include type="modules" name="tab2" style="xhtml" /></p>
           </div>
       </div>
<?php endif; ?>            
       
<?php if ($this->countModules('tab3')) : ?>         
        <div class="tab">
           <input id="tab-6" name="tab-group-2" type="radio">
           <label for="tab-6">Tab3</label>
           <div class="content">
              <p><jdoc:include type="modules" name="tab3" style="xhtml" /></p>
           </div>
       </div>
<?php endif; ?>       
   </div>
<?php endif; ?>   
   
</div>
<!-- END TABS -->   
</div><!-- wrapper end -->
   <div id="bottomwide">
      <div id="bottom" class="clearfix">
         <div class="user1"><jdoc:include type="modules" name="user1" style="xhtml" /></div>
         <div class="user2"><jdoc:include type="modules" name="user2" style="xhtml" /></div>
         <div class="user2"><jdoc:include type="modules" name="user3" style="xhtml" /></div>
      </div>
         <div class="tgwide" ><div id="tg"></div></div>
         <div style="display:none;" class="nav_up" id="nav_up"></div>         
   </div>
   </div><!--/.relative -->
   </div><!--/.fluid-container -->
</body>
</html>
patri4rch
Posty: 7
Dołączył(a): 14.04.2017

Re: Problem z menu (dla mobilnych) tylko na jednej zakładce

Post 18.04.2017, 18:16:18

Myślałem, ze to strona w html. Ale jeżeli to joomla to dlaczego nie użyjesz modułu np:http://thegrue.org/responsive-menu-module-joomla/
pablop76
Posty: 23
Dołączył(a): 13.04.2016


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: RqweF i 1 gość

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50074 zarejestrowanych użytkowników.
Najnowszy użytkownik: WillisEq


Nasi użytkownicy napisali:

  • 934726 wiadomości
  • w 246223 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)