Page 7 of 7

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Posted: Sun Dec 16, 2018 7:12 pm
by ivailo95
okay
i will show you a video of example in one other forum
where this navbar is used static and moveable
https://youtu.be/6ugC8jz4yx8

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Posted: Tue Dec 18, 2018 3:17 pm
by ivailo95
Do you understand me now? :roll:

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Posted: Sat Jan 05, 2019 7:36 pm
by ivailo95
?

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Posted: Sat Jan 05, 2019 9:50 pm
by Badhon_raj
ivailo95 wrote:
Tue Dec 18, 2018 3:17 pm
Do you understand me now? :roll:
ok, I understand this.
You want a settings button on the navbar to switch between static/fixed mode.

I'll just send you the code they used in their site.
I'm not sure if I'll include this in the extension though.


ext/orthohin/navbar/styles/all/template/event/overall_header_body_before.html

Code: Select all

<style type="text/css">
  .bootstrap .navbar .nav > li > a:hover,
  .bootstrap .navbar .nav > li > a:focus {
    background-color: rgba(0,0,0,0.10) !important;
  }
  <!-- IF IS_COLOR -->
  .bootstrap .navbar .nav > li > a,
  /*.bootstrap .navbar ul.dropdown-menu,*/
  .bootstrap .navbar {
    background-color: {BACKGROUND_COLOR};
  }
  .bootstrap .navbar .navbar-toggle .icon-bar{
    background-color: {TEXT_COLOR};
  }
  a.navbar-brand,
  a.navbar-brand:hover,
  .bootstrap .navbar .nav > li > a {
    color: {TEXT_COLOR};
  }
  <!-- ENDIF -->
</style>

<div class="bootstrap">
  <nav class="navbar yamm <!-- IF not IS_COLOR --> navbar-default <!-- ENDIF -->navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- IF LOGO_IMAGE_EXIST -->
            <img height= "50px" src="{LOGO_FILENAME}" alt="{SITENAME}"/>
          <!-- ELSE -->
            <a class="navbar-brand" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{SITENAME}</a>
          <!-- ENDIF -->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav <!-- IF MENU_POSITION -->navbar-right<!-- ENDIF -->">
          <!-- BEGIN menu -->
            <!-- IF menu.IS_MEGA -->
            <li class="drop-down">
              <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="{menu.ICON}"></i>&nbsp;{menu.NAME} <span class="caret"></span></a>
              <ul class="dropdown-menu mega-menu">

                    {menu.MEGA_HTML}

              </ul>
            </li>
              <!-- ELSE -->
              <li>
                <!-- IF not .menu.sub -->
                <a href="{menu.URL}"<!-- IF menu.EXTERNAL --> target="_blank"<!-- ENDIF -->><i class="{menu.ICON}"></i>&nbsp;{menu.NAME}</a>

                <!-- ELSE -->
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="{menu.ICON}"></i>&nbsp;{menu.NAME} <span class="caret"></span></a>
                <!-- ENDIF -->
                <!-- IF .menu.sub -->
                <ul class="dropdown-menu">
                  <!-- BEGIN sub -->
                  <li><a href="{sub.URL}"<!-- IF sub.EXTERNAL --> target="_blank"<!-- ENDIF -->><i class="{sub.ICON} icon-flip-horizontal"></i>&nbsp;{sub.NAME}</a></li>
                  <!-- END sub -->
                </ul>
                <!-- ENDIF -->
              </li>
            <!-- ENDIF -->
          <!-- END menu -->
            <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style=""><i class="fa fa-cog"></i>&nbsp;<span class="caret"></span></a>
              
              <ul class="dropdown-menu">
                <li><a href="#" id="makeStatic">Static</a></li>
                <li><a href="#" id="makeFixed">Fixed</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</div>


ext/orthohin/navbar/styles/all/template/event/overall_footer_body_after.html

Code: Select all

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).on('click', '.yamm .dropdown-menu', function(e) {
  e.stopPropagation()
});

	// https://amxx-bg.info
	// 1fRaNkkK
	const body             = document.querySelector('body');
	const navbar           = document.querySelector('nav.navbar.yamm');
	const navbarMakeStatic = document.querySelector('#makeStatic');
	const navbarMakeFixed  = document.querySelector('#makeFixed');
	
	navbarMakeStatic.addEventListener('click', function () {
		localStorage.setItem('defaultNav', 'fixed');
		window.location.reload(true);
	});
	navbarMakeFixed.addEventListener('click', function () {
		localStorage.setItem('defaultNav', 'static');
		window.location.reload(true);
	});

	if (localStorage.getItem('defaultNav') === 'fixed') {

		navbar.classList.remove('navbar-fixed-top');
	 	navbar.classList.add('navbar-static-top');
		body.style.paddingTop = '0';

	} else if (localStorage.getItem('defaultNav') === 'static') {

		navbar.classList.remove('navbar-static-top');
	 	navbar.classList.add('navbar-fixed-top');
		body.style.paddingTop = '80px';

	}
</script>

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Posted: Mon Jan 07, 2019 11:59 am
by ivailo95
Thanks a lot ! :idea:
by the way maybe need to add following options:
:idea: Display only for Moderators: :idea:
:idea: Display only for Administrators: :idea: