More info about layout override : https://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core
If you want to change how the mod_menu Module is displayed, then you should copy :
PATH_TO_JOOMLA/modules/mod_menu/tmpl/default.php
to
TEMPLATE_NAME/html/mod_menu/default.php
and modify the file in your template
You can also use the Template Manage to create overrides https://docs.joomla.org/J3.x:How_to_use_the_Template_Manager/en#Creating_Overrides
You don't have to modifiy the style in your jdoc:include
<jdoc:include type="modules" name="menuposition" style="xhtml" />
More info about a style
https://docs.joomla.org/Customising_the_way_modules_are_displayed
To define a custom output like "offcanvas", you have to modify this file in your template
PATH_TO_JOOMLA/templates/TEMPLATE_NAME/html/modules.php.
Here an example of custom output. Important, the function name should be modChrome_offcanvas
function modChrome_offcanvas($module, &$params, &$attribs)
{
if ($module->content)
{
echo "<div class=\"module mod" . $module->id . " " . htmlspecialchars($params->get('moduleclass_sfx')) . "\">";
if ($module->showtitle)
{
echo "<h3 class=\"module-header\">" . $module->title . "</h3>";
}
echo $module->content;
echo "</div>";
}
}
It define which is inserted before, after, or around the output of a module.