1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How in left side menu make element opened?

Discussion in 'HTML & Website Design' started by mstdmstd, Jan 17, 2019.

0
  1. #1
    Reading how create left side menu at
    https://bootstrapious.com/p/bootstrap-sidebar#sidebar-4
    In my Laravel 5.7 / jQuery 3 / Blade /Bootsrap 4.1 app I made left menu with 2 menu with subitems, it works, but I failed to open
    some menu on page opening depending on currently page. In mentioned docs I read :
    I tried to make some menu item opened by default, as :

         
   <li>
            <a href="#users_submenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Manage Users</a>
            <ul class="collapse list-unstyled" id="users_submenu">
                <li>
                    <a href="#">Manage Departments</a>
                </li>
                <li>
                    <a href="#">Manage Users</a>
                </li>
            </ul>
        </li>
        <li class=" @if( $current_controller_name == 'WarehousesController' or $current_controller_name == 'ClientsController' ) active @endif ">
            <a href="#manage_storage_submenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Manage Storage</a>
            <ul class="collapse list-unstyled" id="manage_storage_submenu">
                <li class=" @if($current_controller_name == 'ClientsController') active @endif ">
                    <a href="{{ url('admin/clients') }}">Manage Clients</a>
                </li>
    HTML:
    Tring to make 1st element opened I set 
     aria-expanded="true"
    HTML:
    but I missed what they mean as :

    I tried to set for the second element:
     
class="in"
    HTML:
    But it did not help.
    Which is correct?
     
    mstdmstd, Jan 17, 2019 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Your best bet is to probably go find a stick to scrape the bootcrap off with, since it's got you using scripttardery to do CSS' job. On top of all the data attributes for nothing, classes for nothing, ARIA roles for nothing, ID's for nothing, NAV for nothing, Heading of dubious depth... that site you linked to is a monument to incompetence and ignorance; though that's pretty much the norm once you say "bootstrap" -- or any HTML/CSS framework really.

    As evidenced by broken code like this:

    
        <ul class="list-unstyled components">
            <p>Dummy Heading</p>
            <li class="active">
    Code (markup):
    Proof positive that clown had no business telling anyone how to code a blasted thing. Derp even goes full pakled using pixel measurements on text content.

    Again, the only thing you can learn from bootcrap is how NOT to use HTML or CSS. It was built by people not qualified to even tell others how to write a single blasted line of markup. JUST like how the only thing you can learn from jQuery is how NOT to write JavaScript.

    But I could say that about your entire stack of choices. You're only working harder, not smarter. From what you've shown I would toss all of that and start over, using CSS to do CSS' job.

    If I were writing the same page as his demo, it is HIGHLY unlikely I'd have much more code than:

    
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<link
	rel="stylesheet"
	href="nocrap.screen.css"
	media="screen,projection,tv"
>
<title>Collapsible sidebar using Bootstrap 4</title>
</head><body>

<input type="checkbox" id="toggle_top" class="toggle" hidden>

<div id="top"><div class="inner">

	<h1>NeedsNoCrap Sidebar</h1>
	
	<h2>Dummy Heading</h2>
	
	<ul id="mainMenu">
		<li class="current">
			<input type="checkbox" id="toggle_menuHome" class="toggle" hidden>
			<label for="toggle_menuHome">Home</label>
			<div><ul>
				<li><a href="#">Home 1</a></li>
				<li><a href="#">Home 2</a></li>
				<li><a href="#">Home 3</a></li>
			</ul></div>
		</li>
		<li><a href="#">About</a></li>
		<li>
			<input type="checkbox" id="toggle_menuPages" class="toggle" hidden>
			<label for="toggle_menuPages">Pages</label>
			<div><ul>
				<li><a href="#">Page 1</a></li>
				<li><a href="#">Page 2</a></li>
				<li><a href="#">Page 3</a></li>
			</ul></div>
		</li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	
	<hr>
	
	<ul id="controls">
		<li class="featured"><a href="downloads/nocrap.rar">Download source</a></li>
		<li><a href="#">Back to article</a></li>
	</ul>
	
<!-- .inner, #top --></div></div>

<div id="content">

	<div id="pageMenu">
		
		<label for="toggle_top" class="toggleTop"></label>
		
		<input type="checkbox" id="toggle_pageMenu" class="toggle" hidden>
		<label for="toggle_pageMenu"></label>
		<div>
			<ul>
				<li class="current"><a href="#">Page</a></li>
				<li><a href="#">Page</a></li>
				<li><a href="#">Page</a></li>
				<li><a href="#">Page</a></li>
			</ul>
		</div>
		
	<!-- #pageMenu --></div>
		
	<h2>Collapsible Sidebar without Bootcrap</h2>
	<p>
		When I say the only thing you can learn from bootcrap, its fans, and its developers, is how NOT to code a website... well, I'm not joking! For mobile friendly menu show/hide or even desktop, we just don't need JavaScript to do this job anymore! Much less how much of what they do is just plain bloated trash that makes you write as much if not MORE code than you'd have without their flipping library. 
	</p><p>
		<a href="https://bootstrapious.com/tutorial/sidebar/index5.html">The original of this page built with bootstrap and jQuery</a> uses 8.3k of markup and 4.5k of CSS, whilst requiring over 600k in a half dozen plus "framework" files to work. This rewrite only needs 4.3k of HTML and 5.8k of CSS, without any libraries, frameworks, or even a single blasted line of JavaScript present or needed! <strong>THAT is what I mean by developer ineptitude and incompetence</strong>, and how the folks who created all these stupid front-end frameworks are utterly and completely unqualified to write a single blasted line of HTML, much less be telling others how to do so!!!
	</p>

	<h2>Lorem Ipsum Dolor</h2>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	<h2>Lorem Ipsum Dolor</h2>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	<h3>Lorem Ipsum Dolor</h3>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	
<!-- #content --></div>

</body></html>
    Code (markup):
    The hidden inputs being :checked triggers for the show/hide. A stunning example of how to use half the markup and a third the file counts to do the dame bloody job.

    If I have time later (aka insomnia) I'll redo his example page without the idiotic halfwitted mentally enfeebled BULLSHIT that are "frameworks" to show you how that should have been done... though even with my above rewrite the lack of logical document structure means I would never deploy that type of design on a real website. Content dictates markup, content + markup + device capabilities should dictate layout; this entire concept was clearly not built with that in mind.
     
    Last edited: Jan 24, 2019
    deathshadow, Jan 24, 2019 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Live demo to show what I mean:

    https://cutcodedown.com/for_others/mstdmstd/

    Not JavaScript's job, and proof positive of just how mind-numbingly dumbass, idiotic, and halfwitted the train wreck laundry list of how NOT to code a website bootcrap really is. Web developers on the whole are dumber for HTML/CSS frameworks even existing, resulting in fat bloated markup and doing two to ten times the work needed to accomplish a task.

    ... and then they have the unmitigated GALL to call their bullshit "easier".
     
    deathshadow, Jan 24, 2019 IP