How can I adapt and active the Sidebar menu fomantic-ui? #3107
-
|
How can I adapt the Sidebar fomantic-ui? My Sidebar fomantic-ui not active. If i click menu button it's not active. I'm trying to create a Django . HTML design from the navigation bar made by hand and the rest of the content to design based on ready-made styles - fomantic-ui.com. I would like, if possible, to try to somehow integrate the menu bar into the style system. I'm still a beginner. I mainly do logic in Django, and for the interface, blocks are something similar to fomantic-ui.com - ready-made style systems. https://fomantic-ui.com/modules/sidebar.html#/examples
|
Beta Was this translation helpful? Give feedback.
Replies: 9 comments 7 replies
-
By adjusting those 2 issues, your sidebar works as expected |
Beta Was this translation helpful? Give feedback.
-
|
Please help please. If i click by ui vertical menu - active ui labeled icon left inline vertical demo sidebar menu. If i click by ui vertical menu - You don't have to do the action as in the picture with the shift - just click and follow the link. And it happens as if I click on the top button - the menu, and not on the menu under the text - Application Content. How can I active dropdown menu? My dropdown menu not active. If i click menu button it's not active. I'm trying to create a Django . HTML design from the navigation bar made by hand and the rest of the content to design based on ready-made styles - fomantic-ui.com.
|
Beta Was this translation helpful? Give feedback.
-
|
You need to initialize the dropdown, it's a JS module $('.ui.dropdown').dropdown();See https://jsfiddle.net/lubber/r56b3p7z/6/ |
Beta Was this translation helpful? Give feedback.
-
|
Good morning! Sorry for bothering you. In the first option - mode - loading the page - this is if you interrupt it at the loading stage and not completely. In the second option - loading the page - this is if you do not interrupt the loading and the loading is complete. It is possible that something is not working somewhere. index.html content.html
|
Beta Was this translation helpful? Give feedback.
-
|
On the first screenshot you can see - that I can't scroll further - to see the content. I can't see the content - scroll the scroll on the right side - something is limiting the displayed content on the page. On the right - you can see the scroll - on the screenshots - you can see the difference between what the content should be - it should all be visible. |
Beta Was this translation helpful? Give feedback.
-
|
I'm trying to create a shell for Django. And I have a strange thing - visibility - content availability is limited. Although everything seems to load when loading - but then when fully loaded for some reason - there is a limitation - there is no scrolling of all the contents. Maybe you can find out why this is happening to me. |
Beta Was this translation helpful? Give feedback.
-
|
Help please. This code after the page is fully loaded - limits part of the page - template. When it is removed, everything loads normally - but the button for activating the menu call is not active - at the top left. https://fomantic-ui.com/modules/sidebar.html#/examples
|
Beta Was this translation helpful? Give feedback.
-
|
Try to start the sidebarcode at the very end of your webpage, not in between, so the code has access to the whole loaded dom tree |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much for your answer!!! Are you thinking of placing Javascript code or html div? What can I try to do? I will be glad if you tell me. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
<body> <!-- ... your whole html code .. -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<script>
// using context
$('.ui.sidebar')
.sidebar({
context: $('.bottom.segment')
})
.sidebar('attach events', '.ui.top.attached.demo.menu .item');
$('.ui.dropdown').dropdown();
$('.ui.selection.dropdown') // -- this will override the previous .dropdown() (.selection.dropdown includes .dropdown selector !
.dropdown({
clearable: true
});
</script>
</body> |
Beta Was this translation helpful? Give feedback.
-
|
I tried to do it in different ways. Something is happening and the visible content area is being cut off. It feels like it's because of the sidebar, which is called by the menu button at the top left. When I remove this code, everything is fine - but the menu buttons are not active.
|
Beta Was this translation helpful? Give feedback.
-
|
Your content to be pushed needs to stay inside the <body>
<div class="ui sidebar menu"> your sidebar</div>
<div class="ui top attached demo menu">your top menu
<div class="item">Your sidebar trigger menu item</div>
</div>
<div class="pusher">
<div class="ui bottom attached segment">
your custom context div
</div>
</div>
<script src="jquery.js"></script>
<script src="semantic.min.js"></script>
<script>
$(".ui.sidebar")
.sidebar({
context: $(".bottom.segment"),
})
.sidebar("attach events", ".ui.top.attached.demo.menu .item")
</script>
</body>Your fixed example is here: The example at the docs site has this wrong as well, but does not contain that much content so the issue is not visible there. Will provide a fix for the docs repo |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much! You saved me. Sorry for bothering me. I wanted to ask. How can I make it so that the menu button at the top and the side menu remain in their place - were fixed when scrolling and viewing the contents of the page. |
Beta Was this translation helpful? Give feedback.
-
|
I put together a full working example, so you can play with. I think, you have everything ready now to adjust it according to your needs on your own 😉 Enjoy raising your knowledge :) |
Beta Was this translation helpful? Give feedback.
-
|
Good day! Thank you very much. I am currently in a difficult period of my life and an attempt to develop some mini-project means a lot to me. I plan to study theoretical knowledge more deeply from November. I really miss the ability to fix the side element - I am trying different options but I have not succeeded yet.
|
Beta Was this translation helpful? Give feedback.
.sidebar()beforesemantic.min.jsis included, , include semantic.min.js beforehand.context.exampledoes not exist in your dom tree)By adjusting those 2 issues, your sidebar works as expected
See https://jsfiddle.net/lubber/r56b3p7z/2/