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

A place for Extension Authors to post and receive feedback on Extensions still in development. No Extensions within this forum should be used within a live environment!
Scam Warning
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: Extensions Development rules

IMPORTANT FOR NEEDED EVENTS!!!
If you need an event for your extension please read this for the steps to follow to request the event(s)
ivailo95
Registered User
Posts: 727
Joined: Tue Sep 05, 2017 8:00 am
Location: Bulgaria
Name: Ivailo
Contact:

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

Post by ivailo95 » Sun Dec 16, 2018 7:12 pm

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

ivailo95
Registered User
Posts: 727
Joined: Tue Sep 05, 2017 8:00 am
Location: Bulgaria
Name: Ivailo
Contact:

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

Post by ivailo95 » Tue Dec 18, 2018 3:17 pm

Do you understand me now? :roll:

ivailo95
Registered User
Posts: 727
Joined: Tue Sep 05, 2017 8:00 am
Location: Bulgaria
Name: Ivailo
Contact:

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

Post by ivailo95 » Sat Jan 05, 2019 7:36 pm

?

Badhon_raj
Registered User
Posts: 156
Joined: Wed Jan 04, 2012 6:33 pm

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

Post by Badhon_raj » Sat Jan 05, 2019 9:50 pm

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>

ivailo95
Registered User
Posts: 727
Joined: Tue Sep 05, 2017 8:00 am
Location: Bulgaria
Name: Ivailo
Contact:

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

Post by ivailo95 » Mon Jan 07, 2019 11:59 am

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:

Post Reply

Return to “Extensions in Development”