Page 1 of 1
How can I add a drop down menu to the top boarder?
Posted: Fri May 17, 2024 10:48 pm
by Sarra
Hi there,
I'm using Oxygen XML Author to create a website. The top boarder of the website contains the topic head titles. I have multiple topic heads so the title list exceeds one line (2 lines). I would like to change it to add a drop down menu when the title list exeeds one line.
How can I do that?
I'm using the from the box Oxygen XML Author templates
Thank you
Re: How can I add a drop down menu to the top boarder?
Posted: Wed Jun 19, 2024 11:18 am
by cosmin_andrei
Hi Sarra,
Thank you for your feedback!
This could be achieved most probably through a CSS and JS customization. More details on how to add a custom CSS in the WebHelp Responsive output can be found using the following link:
https://www.oxygenxml.com/doc/versions/ ... h-css.html
Re: How can I add a drop down menu to the top boarder?
Posted: Wed Jun 26, 2024 6:03 am
by sistergibson
Use Oxygen's element picker tool to identify the class name associated with the topic head titles in your template.
Create a new CSS stylesheet or add the following code snippet to your existing stylesheet (adjust class names and properties as needed)
Code: Select all
CSS
.topicheadtitle { /* Replace with your actual class name */
white-space: nowrap; /* Prevent titles from wrapping onto multiple lines */
overflow: hidden; /* Hide overflowing content */
text-overflow: ellipsis; /* Add ellipsis (...) for overflowing text */
}
.topicheadtitle:hover { /* Style on hover (optional) */
background-color: #eee; /* Change background color on hover */
}
/* Additional styles for dropdown (optional) */
.topicheadtitle-dropdown {
display: none;
position: absolute;
background-color: #fff;
/* Other dropdown styles */
}
.topicheadtitle:hover .topicheadtitle-dropdown {
display: block;
/* Additional hover styles */
}
This code snippet sets the white-space, overflow, and text-overflow properties to prevent titles from wrapping and display ellipsis (…) for overflowing text.
The hover effect changes the background color on hover.
You can add additional styles (commented out) to create a dropdown menu that appears on hover. This would require further customization to populate the dropdown with the full list of titles.
Re: How can I add a drop down menu to the top boarder?
Posted: Tue Jul 02, 2024 10:18 am
by highwayskiver
Excellent, I appreciate you describing what you done. We should definitely set aside some time to carry out such actions and compose a brief guide for those who might wish to follow in our footsteps.